CSS 강좌 | Box Model > Border > border-width

테두리 굵기는 border-width 속성으로 정합니다. 속성값으로는 thin, medium, thick과 px 등 길이를 사용할 수 있습니다.

속성값은 다음과 같이 부여합니다.

border-width: xx yy zz ww;

xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽입니다. 이는 다음과 같이 나타낼 수도 있습니다.

border-top-width: xx;
border-right-width: yy;
border-bottom-width: zz;
border-left-width: ww;

border-width의 속성값을 하나만 쓰면 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.

border-width: xx;
border-width: xx xx xx xx;

속성값을 두 개 쓰면 첫번째 값은 위와 아래, 두번째 값은 오른쪽과 왼쪽에 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.

border-width: xx yy;
border-width: xx yy xx yy;

속성값을 세 개 쓰면 두번째 값을 오른쪽과 왼쪽에 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.

border-width: xx yy zz;
border-width: xx yy zz yy;

간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS | border-width</title>
    <style type="text/css">
      .bw {
        border-style: solid;
        border-width: thin medium thick 10px;
      }
    </style>
  </head>
  <body>
    <div class="bw">
      <h3>Lorem ipsum dolor</h3>
    </div>
  </body>
</html>

Category

Created on 2013-12-16 13:24 | Updated on 2015-07-16 23:30

이 글을 공유하기

Kakao

Book navigation