CSS 강좌 | Box Model > Border > border

HTML 요소의 테두리는 border 속성으로 만듭니다. 테두리는 굵기, 모양, 색으로 구성되어 있습니다. 문법은 다음과 같습니다.

border: 5px solid gray;

굵기는 5px, 모양은 실선, 색은 회색으로 만들겠다는 뜻입니다. 간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS | border</title>
    <style type="text/css">
      div.bd {
        text-align: center;
        border: 5px solid gray;
      }
    </style>
  </head>
  <body>
    <div class="bd">
      <p>Lorem ipsum dolor.</p>
    </div>
  </body>
</html>

border 속성은 모든 모서리에 같은 값을 부여합니다. 만약 모서리마다 다른 값을 부여하려면 border-top, border-right, border-bottom, border-left 속성을 이용하면 됩니다. 간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS | border</title>
    <style type="text/css">
      div.bd {
        text-align: center;
        border-top: 5px solid gray;
        border-right: 4px dotted red;
        border-bottom: 3px double blue;
        border-left: 2px dashed green;
      }
    </style>
  </head>
  <body>
    <div class="bd">
      <p>Lorem ipsum dolor.</p>
    </div>
  </body>
</html>

Category

Created on 2013-12-12 18:51 | Updated on 2015-07-16 23:29

이 글을 공유하기

Kakao