border

테두리(border)

내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다.

border-style

border-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있습니다.

• dotted : 테두리를 점선으로 설정함.
• dotted : 테두리를 점선으로 설정함.
• solid : 테두리를 실선으로 설정함.
• double : 테두리를 이중 실선으로 설정함.
• groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
• ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
• inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• none : 테두리를 없앰.
• hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

border-width 속성

border-width 속성은 테두리(border)의 두께를 설정합니다. px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있습니다. 또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있습니다.

border-color 속성

border-color 속성은 테두리(border)의 색상을 설정합니다. 기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있습니다. border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받습니다.

CSS border 속성

속성	설명
border	모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-style	테두리(border)를 다양한 모양으로 설정함.
border-width	테두리(border)의 너비를 설정함.
border-color	테두리(border)의 색상을 설정함.
border-top	테두리(border)의 top 부분 속성을 한 번에 설정함.
border-top-style	테두리(border)의 top 부분의 스타일을 설정함.
border-top-width	테두리(border)의 top 부분의 너비를 설정함.
border-top-color	테두리(border)의 top 부분의 색상을 설정함.
border-right	테두리(border)의 right 부분 속성을 한 번에 설정함.
border-right-style	테두리(border)의 right 부분의 스타일을 설정함.
border-right-width	테두리(border)의 right 부분의 너비를 설정함.
border-right-color	테두리(border)의 right 부분의 색상을 설정함.
border-bottom	테두리(border)의 bottom 부분 속성을 한 번에 설정함.
border-bottom-style	테두리(border)의 bottom 부분의 스타일을 설정함.
border-bottom-width	테두리(border)의 bottom 부분의 너비를 설정함.
border-bottom-color	테두리(border)의 bottom 부분의 색상을 설정함.
border-left	테두리(border)의 left 부분 속성을 한 번에 설정함.
border-left-style	테두리(border)의 left 부분의 스타일을 설정함.
border-left-width	테두리(border)의 left 부분의 너비를 설정함.
border-left-color	테두리(border)의 left 부분의 색상을 설정함.