CSS 테두리 Borders

border 속성은 요소의 테두리의 스타일, 너비, 색을 지정할 수 있게 해준다.

border-style 속성은 테두리의 모습을 지정할 때 쓰인다. 근데 보통 solid로 쓰는 것 같다.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

border-width는 테두리의 너비를 지정한다.

미리 정의된 thin, medium, thick을 쓰거나 px, pt, cm, em 등의 단위를 써서 크기를 지정한다.

테두리의 위 오른쪽 아래 왼쪽의 두께를 지정할 수도 있다.

                    위  오른 아래 왼

border-width: 2px 10px 4px 0px;

Some text.

border-color는 테두리 색 지정할 때 쓰인다

border-style: solid;

border-color: red green blue yellow;

A solid multicolor border

border - individual sides

테두리의 각 측면을 따로 지정할 수 있다.

Different Border Styles

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

이렇게 해도 같은 결과가 나온다. 위아래는 점선 왼쪽오른쪽은 실선

border-style: dotted solid;

border - shorthand property

테두리를 쓸 때 많은 것을 고려해야 한다. 코드를 짧게 쓰려면 하나의 border 속성에 모든 각각의 테두리 속성을 지정할 수 있다.

너비, 스타일(필수), 색 속성을 쓰면 된다.

border: 5px solid red;

Some text

왼쪽만 지정하고 싶을 땐

border-left: 6px solid red;
background-color: lightgrey;

Some text

rounded borders

border-radius 속성은 요소에 둥근 모서리를 추가하기 위해 쓰인다.

border-radius 값이 클 수록 모서리가 더 둥글게 된다.

border: 2px solid red;

border-radius: 12px;

https://www.w3schools.com/css/css_border.asp