[CSS] border 속성 (border-style, border-width, border-color, border-radius...)

 

border 테두리 관련 속성을 살펴보자.

 

border-style

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

 

border-style 속성 값

 

• dotted 
• dashed 
• solid
• double 
• groove
• ridge
• inset
• outset

 

border-width 

테두리 선의 두께를 지정하는 속성.

 

border-color

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

 

한 번에 지정하는 법

/* border: (선 두께) (선 스타일) (선 색상); */
border: 2px solid red;

---

 border-radius

엘리먼트 코너 둥글게 하기

 

코너 개별적으로 둥글게 하기

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-botton-right-radius

 

원 만들기

• border-radius: 50%;

 

한 번에 각 코너 지정하는 법

/*border-radius: (top-left) (top-right) (bottom-right) (bottom-left);*/
border-radius: 10px 30px 10px 20px;

See the Pen border-radius by k (@kjwboa) on CodePen.