css border

border 속성에 대해 알아보자

표현 방법

• border-top, border-right, border-bottom, border-left
• border: 5px -> 4면 모두 5px
• border: 5px 10px -> top, bottom은 5px, right, left은 10px
• border: 5px 10px 7px -> top은 5px, right, left는 10px, bottom은 7px
• border: 5px 10px 7px 8px

border-style: 보더 선 스타일

- dashed

border-style: dashed;

- dotted

border-style: dotted;

- solid

border-style: solid;

- double

border-style: double;

- groove

border-style: groove;

• 테두리가 파인 것 처럼 보임

- ridge

border-style: ridge;

• 테두리가 튀어나온 것 처럼 보임

- inset

border-style: inset;

• 요소가 파인 것 처럼 보임

- outset

border-style: outset;

• 요소가 튀어나온 것 처럼 보임

border-width: 보더 두께

- thin

border-width: thin;

- medium

border-width: medium;

- thick

border-width: thick;

border-radius: 보더 모서리 라운드

- radius

border-radius: 25px;