CSS / Reference / border

개요

border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만듭니다.

문법

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
border: border-width border-style border-color | initial | inherit
border: border-width border-style border-color | initial | inherit
border: border-width border-style border-color | initial | inherit
  • border-width : 테두리의 두께를 정합니다. 기본값은 medium입니다.
  • border-style : 테두리의 모양을 정합니다. 기본값은 none입니다.
  • border-color : 테두리의 색을 정합니다. 기본값은 선택한 요소의 색입니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
medium | thick | thin | length | initial | inherit
medium | thick | thin | length | initial | inherit
medium | thick | thin | length | initial | inherit

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit
dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit
dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit

예제

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

같은 카테고리의 다른 글
CSS / Reference / background-attachment

CSS / Reference / background-attachment

background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / list-style-position

CSS / Reference / list-style-position

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / calc()

CSS / Reference / calc()

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px );

CSS / Reference / empty-cells

CSS / Reference / empty-cells

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / aspect-ratio

CSS / Reference / aspect-ratio

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

CSS / Reference / white-space

CSS / Reference / white-space

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / accent-color

CSS / Reference / accent-color

accent-color는 HTML의 폼 요소에 사용되는 강조 색상을 정하는 속성입니다. 기본적으로 브라우저는 사용자 인터페이스 요소에 특정한 시스템 색상을 사용하지만, accent-color를 사용하면 이러한 요소들의 강조 색상을 커스터마이즈할 수 있습니다.

CSS / Reference / list-style-type

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

CSS / Reference / background-origin

CSS / Reference / background-origin

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / letter-spacing, word-spacing

CSS / Reference / letter-spacing, word-spacing

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