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 : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 색(color)입니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

border-width에는 다음의 값을 넣을 수 있습니다.

medium | thick | thin | length | initial | inherit

border-style에는 다음의 값을 넣을 수 있습니다.

dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS</title>
    <style type="text/css">
      div {
        margin: 10px 0px;
        text-align: center;
        font-family: Consolas, monospace;
        font-style: italic;
        font-size: 13px;
      }
      .a {
        border: 4px dashed #bcbcbc;
      }
      .b {
        border: thick dotted #f44336;
      }
      .c {
        border: 5pt groove #3f51b5;
      }
      .d {
        border: 0.4em inset #009688;
      }
      .e {
        border: 5px ridge #ff5722;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <p>border: 4px dashed #bcbcbc;</p>
    </div>
    <div class="b">
      <p>border: thick dotted #f44336;</p>
    </div>
    <div class="c">
      <p>border: 5pt groove #3f51b5;</p>
    </div>
    <div class="d">
      <p>border: 0.4em inset #009688;</p>
    </div>
    <div class="e">
      <p>border: 5px ridge #ff5722;</p>
    </div>
  </body>
</html>

브라우저 지원

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

Related Posts

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...

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 / counter-reset, counter-increment로 일련 번호 붙이기

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 애니메이션 / transform / scale – 2D 확대 또는 축소하기

CSS / 애니메이션 / transform / scale – 2D 확대 또는 축소하기

transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면에서의 확대 또는 축소입니다. IE는 버전 10부터 지원합니다. 문법 transform: scale( 2.0 ); 가로와 세로 모두 2배 확대합니다. transform: scale( 2.0, 1.5 ); 가로로 2배, 세로로 1.5배 확대합니다. transform: scaleX( 2.0 ); 가로로 2배 확대합니다. transform: scaleX( 2.0 ) scaleY( 1.5 ); 가로로 2배, 세로로 1.5배 확대합니다. 예제 마우스를 올렸을 때 확대됩니다. 그 ...

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

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 : 삐침 있는 ...

CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

@keyframes @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다. IE는 버전 10 이상에서 사용할 수 있습니다. 문법 @keyframes name { 0% { ... } n% { ... } 100% { ... } } name : 애니메이션의 이름을 정합니다. 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 ...

CSS 강좌