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 / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / 마우스 오버 효과 /  이미지 확대

CSS / 마우스 오버 효과 / 이미지 확대

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / 기초 / !important

CSS / 기초 / !important

개요 CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 문법 property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 ...

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...

CSS / 짧은 밑줄 만들기

CSS / 짧은 밑줄 만들기

짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...

CSS 강좌