CSS / border-style / 테두리 모양을 정하는 속성

개요

border-style은 테두리(border)의 모양을 정하는 속성입니다.

  • 기본값 : none
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 1

border-style은 border-top-style, border-right-style, border-bottom-style, border-left-style의 축약형입니다.

문법

border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

initial과 inherit 이외의 값의 모양은 아래의 예제를 참고하세요.

속성값은 한 개에서 네 개까지 정할 수 있습니다.

border-style: xx

모든 모서리의 모양을 xx로 만듭니다.

border-style: xx yy

위쪽과 아래쪽 모서리의 모양은 xx로, 왼쪽와 오른쪽의 모양은 yy로 만듭니다.

border-style: xx yy zz

위쪽 모양은 xx로, 왼쪽과 오른쪽의 모양은 yy로, 아래쪽의 모양은 zz로 만듭니다.

border-style: xx yy zz ww

위쪽 모양은 xx로, 오른쪽 모양은 yy로, 아래쪽의 모양은 zz로, 왼쪽 모양은 ww로 만듭니다.

예제 1

각 속성값이 어떤 모양인지 보여주는 예제입니다. 값에 따라서 브라우저마다 모양이 다르게 나올 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      h1 {
        font-family: Georgia;
        font-style: italic;
        padding: 10px;
      }
      .none {
        border-style: none;
      }
      .hidden {
        border-style: hidden;
      }
      .dotted {
        border-style: dotted;
      }
      .dashed {
        border-style: dashed;
      }
      .solid {
        border-style: solid;
      }
      .double {
        border-style: double;
      }
      .groove {
        border-style: groove;
      }
      .ridge {
        border-style: ridge;
      }
      .inset {
        border-style: inset;
      }
      .outset {
        border-style: outset;
      }
    </style>
  </head>
  <body>
    <h1 class="none">No Border.</h1>
    <h1 class="hidden">Hidden Border.</h1>
    <h1 class="dotted">Dotted Border.</h1>
    <h1 class="dashed">Dashed Border.</h1>
    <h1 class="solid">Solid Border.</h1>
    <h1 class="double">Double Border.</h1>
    <h1 class="groove">Groove Border.</h1>
    <h1 class="ridge">Ridge Border.</h1>
    <h1 class="inset">Inset Border.</h1>
    <h1 class="outset">Outset Border.</h1>
  </body>
</html>

마이크로소프트 엣지에서는 다음과 같이 나옵니다.

크롬에서는 다음과 같이 나옵니다.

파이어폭스에서는 다음과 같이 나옵니다.

예제 2

속성값 중 none과 hidden은 표(table)에서

border-collapse: collapse

일 때 차이가 납니다. 다음은 그 차이를 보여주는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS</title>
    <style type="text/css">
      table {
        width: 100%;
        font-family: Georgia;
        font-style: italic;
        border: 1px solid #000000;
        border-collapse: collapse;
      }
      table td {
        border: 1px solid #000000;
        padding: 0px 20px;
      }
      table.none {
        border-style: none;
      }
      table.hidden {
        border-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>border-style: none;</h1>
    <table class="none">
      <tr>
        <td>
          <p>Lorem</p>
        </td>
        <td>
          <p>Ipsum</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Dolor</p>
        </td>
        <td>
          <p>Amet</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Phasellus</p>
        </td>
        <td>
          <p>Mauris</p>
        </td>
      </tr>
    </table>
    <h1>border-style: hidden;</h1>
    <table class="hidden">
      <tr>
        <td>
          <p>Lorem</p>
        </td>
        <td>
          <p>Ipsum</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Dolor</p>
        </td>
        <td>
          <p>Amet</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Phasellus</p>
        </td>
        <td>
          <p>Mauris</p>
        </td>
      </tr>
    </table>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 3.5+
  • Safari : 1.0+

Related Posts

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

CSS / ul, ol 가운데 정렬하는 방법

CSS / ul, ol 가운데 정렬하는 방법

목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...

CSS / font-weight / 글자 굵기 정하는 속성

CSS / font-weight / 글자 굵기 정하는 속성

개요 font-weight로 글자의 굵기를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 700과 같습니다. bolder : 상속된 값보다 굵은 굵기입니다. lighter : 상속된 값보다 얇은 굵기입니다. number : ...

CSS / font-size / 글자 크기 정하는 속성

CSS / font-size / 글자 크기 정하는 속성

개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...

CSS / 체크박스 꾸미는 방법

CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / border / 테두리 만드는 속성

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈합니다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...

CSS / font-family / 글꼴 정하는 속성

CSS / font-family / 글꼴 정하는 속성

개요 font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다. generic-family는 글꼴 유형입니다. serif : 삐침 있는 ...