[CSS] 테두리 만들기 (Border)

테두리는 박스 요소뿐만 아니라 다양한 요소에 넣을 수 있습니다

 

테두리 기본 속성

● border-style

테두리 스타일을 지정하는 속성

 

기본 문법 예시

border-style : none | solid | dashed | dotted | double 

 

속성 값	설명	기타
none	선을 표시하지 않음	기본값
solid	실선으로 표시
dashed	짧은 선으로된 점선으로 표시
dotted	점선으로 표시
double	두 줄로 표시	두 줄 사이의 간격은 border-width로 지정

이 외에 속성값 알아보기

 

● border-width

테두리 두께를 지정하는 속성

 

기본 문법 예시

border-width : <크기> | thin | medium | think
border-top-width : <크기> | thin | medium | think
border-right-width : <크기> | thin | medium | think
border-bottom- width : <크기> | thin | medium | think
border-left-width : <크기> | thin | medium | think

 

속성 값	설명	기타
<크기>	고정값으로 지정
thin	얇게
medium	중간
thick	굵게

 

TIP!
border-width 속성에서 각 각의 방향에 크기를 지정할 수 있습니다
이 때 속성 값은 띄어쓰기로 구분하며, 차례대로 위쪽, 오른쪽, 아래쪽, 왼쪽 순으로 시계방향으로 적용됩니다
ex) border-width : 5px 2px 3px 1px
만약, 위/아래와 좌/우 이렇게는 같은 값을 쓴다면 묶어서 지정 할 수 있습니다 
ex) border-width : 3px 4px
위아래 3px 지정, 좌우 4px 지정

 

● border-color

테두리의 색을 지정하는 속성

 

기본 문법 예시

border-color : <색상>
border-top-color : <색상>
border-right-color : <색상>
border-bottom-color : <색상>
border-left-color : <색상>

 

TIP!
해당 속성만 사용해서는 적용됐는지 확인할 수 없습니다
해당 속성을 사용 할 때는 border-style, border-width 속성이 지정되어 있어야 합니다

 

---

 

테두리 속성 한 줄로 쓰기

● border

테두리 속성을 한 줄로 작성하는 속성

 

기본 문법 예시

border : <border-width> <border-color> <border-style>
border-top : <border-width> <border-color> <border-style>
border-right : <border-width> <border-color> <border-style>
border-bottom : <border-width> <border-color> <border-style>
border-left : <border-width> <border-color> <border-style>

 

---

 

테두리 둥글게 만들기

● border-radius

테두리의 끝을 둥글게 만드는 속성

테두리의 끝에 원이 있다고 가정하고 그 원의 반지름을 지정하여 곡선을 주는 것

 

기본 문법 예시

border-radius : <크기>
border-top-left-radius : <크기>
border-top-right-radius : <크기>
border-bottom-right-radius : <크기>
border-bottom-left-radius : <크기>

 

속성 값	설명	기타
<크기>	고정값과 상대값으로 지정

 

TIP!
각 각의 방향에 크기를 지정할 수 있습니다
이 때 속성 값은 띄어쓰기로 구분하며, 차례대로 왼쪽 위부터 시계방향으로 적용됩니다
왼쪽 위/오른쪽 아래 , 오른쪽 위/왼쪽 아래를 묶어 값을 줄 수 있습니다

 

border-radius 속성으로 원 만들기

1.  width와 height 속성으로 정사각형 만들기
2.  heigth값의 절반 값 주기

TIP!
ex) width : 50px; height : 50px;
border-radius : 25px ; 
border-radius : 50% ; 

 

border-radius 속성으로 타원 형태로 만들기

• 각 모서리마다 지정할 경우 - 띄어쓰기로 구분

border-top-left-radius : <가로 반지름> <세로 반지름>

 

• border-radius로 지정할 경우 - /로 구분

border-radius : <가로 반지름> <세로 반지름> / <가로 반지름> <세로 반지름>

 

---

 

관련 포스트

박스 모델 알아보기 & 관련 속성 알아보기 (Box Model)

[HTML/CSS] 박스 모델 알아보기 & 관련 속성 알아보기 (Box Model)

 

 

---

 

참조 자료

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

https://developer.mozilla.org/ko/docs/Web/CSS/border-radius