css 박스 모델: 테두리에 효과 주기

css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소의 테두리에 효과를 주기 위해서는 border 속성을 사용해서 테두리의 굵기, 색깔, 스타일을 변경할 수 있습니다.

 

콘텐츠 기준으로 적용

 

#one {
        background-color: red;
        border-width: 5px;
        border-color: black;
        border-style: solid;
 }

 

테두리는 기본적으로 콘텐츠를 기준으로 적용이 돼서 기존의 사이즈에 테두리 두께까지 추가가 됩니다. ex) 300*300 -> 310*310

 

테두리 기준으로 적용

 

#two {
        background-color: blue;
        border-width: 5px;
        border-color: black;
        border-style: solid;
        box-sizing: border-box;
 }

 

box-sizing에 border-box를 주면 기존의 테두리를 기준으로 적용을 해서 사이즈는 그대로 유지가 됩니다. ex) 300*300 -> 300*300

 

상하좌우 각각 적용

 

#three {
        background-color: yellow;
        border-left-color: aqua;
        border-right-color: aquamarine;
        border-top-color: black;
        border-bottom-color: blue;
        border-left-style: dashed;
        border-right-style: dotted;
        border-top-style: double;
        border-bottom-style: groove;
        border-left-width: 1px;
        border-right-width: 3px;
        border-top-width: 5px;
        border-bottom-width: 7px;
}

 

left, right, top, bottom 속성을 사용해서 상하좌우를 각각 적용할 수 있습니다.

 

border 속성으로 적용

 

#four {
        background-color: brown;
        border: 5px solid black;
}

 

border 속성을 사용을 사용해서 width, style, color 순서로 입력하면 한 줄에 적용할 수 있습니다.

 

테두리 둥글게 하기

 

#five {
        background-color: aqua;
        border-width: 5px;
        border-color: black;
        border-style: solid;
        border-radius: 50%;
 }

 

 

border-radius 속성을 사용해서 테두리를 둥글게 만들 수 있습니다.