[CSS] Box Model - 경계선(border)

http://www.homejjang.com/07/border.php 입니다.

border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.

<p style="border:1px gray solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p>

 

위와 같이 지정하면 1px의 gray 색상을 가진 경계선이 표시됩니다.

border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.

 

border:1px gray solid 에서 1px은 경계선을 굵기를 지정하고, gray는 경계선의 색상을 지정합니다. 마지막에 있는 solid는 경계선을 스타일을 지정합니다.

이를 하나씩 분리하여 지정할 수도 있습니다.

<p style="border-width:1px; border-color:gray; border-style:solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p>

 

border-style 속성값으로는 solid 외에  dotted, dashed, double 등이 있습니다.

화면상에 구분이 잘되게끔 border-width를 2픽셀로 지정해보겠습니다.

<p style="border-width:2px; border-color:gray; border-style:solid;">solid 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dotted;">dotted 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dashed;">dashed 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:double;">double 스타일의 경계선</p>

solid 스타일의 경계선 dotted 스타일의 경계선 dashed 스타일의 경계선 double 스타일의 경계선