CSS / Reference / border-style

개요

border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다.

  • 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 : 기본값으로 설정합니다. 기본값은 none이다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

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

  • 다음은 모든 모서리의 모양을 xx로 만듭니다.
border-style: xx
  • 다음은 위쪽과 아래쪽 모서리의 모양은 xx로, 왼쪽와 오른쪽의 모양은 yy로 만듭니다.
border-style: xx yy
  • 다음은 위쪽 모양은 xx로, 왼쪽과 오른쪽의 모양은 yy로, 아래쪽의 모양은 zz로 만듭니다.
border-style: xx yy zz
  • 다음은 위쪽 모양은 xx로, 오른쪽 모양은 yy로, 아래쪽의 모양은 zz로, 왼쪽 모양은 ww로 만듭니다.
border-style: xx yy zz ww

예제 1

  • 각 속성값이 어떤 모양인지 보여주는 예제입니다. 브라우저마다 모양이 다르게 나올 수 있습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      p {
        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>
    <p class="none">No Border.</p>
    <p class="hidden">Hidden Border.</p>
    <p class="dotted">Dotted Border.</p>
    <p class="dashed">Dashed Border.</p>
    <p class="solid">Solid Border.</p>
    <p class="double">Double Border.</p>
    <p class="groove">Groove Border.</p>
    <p class="ridge">Ridge Border.</p>
    <p class="inset">Inset Border.</p>
    <p class="outset">Outset Border.</p>
  </body>
</html>

예제 2

  • 속성값 중 none과 hidden은 표에서 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>

같은 카테고리의 다른 글
CSS / Reference / font-style

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / font-weight

CSS / Reference / font-weight

font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / tab-size

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / letter-spacing, word-spacing

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

CSS / Reference / color

CSS / Reference / color

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Reference / background-size

CSS / Reference / background-size

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / font-family

CSS / Reference / 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는 글꼴 유형입니다. 글꼴 유형은 다음과 ...

CSS / Reference / aspect-ratio

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.

CSS / Reference / background-clip

CSS / Reference / background-clip

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / white-space

CSS / Reference / white-space

개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.   스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...