border-width

CSS Reference
Created 2024-09-11 Last Modified 2024-09-11

1 개요
2 문법
3 예제

개요

border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다.

border-top-width
border-right-width
border-bottom-width
border-left-width

문법

border-width: medium | thin | thick | length | initial | inherit;

initial : 기본값으로 설정합니다. 기본값은 medium입니다.
inherit : 부모 요소의 속성값을 상속받습니다.

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

다음은 모든 테두리의 두께를 xx로 만듭니다.

border-width: xx

다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 만듭니다.

border-width: xx yy

다음은 위쪽 두께는 xx로, 왼쪽과 오른쪽의 두께는 yy로, 아래쪽의 두께는 zz로 만듭니다.

border-width: xx yy zz

다음은 위쪽 두께는 xx로, 오른쪽 두께는 yy로, 아래쪽 두께는 zz로, 왼쪽 두께는 ww로 만듭니다.

border-width: xx yy zz ww

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      p {
        margin: 20px 0px;
        padding: 10px 20px;
        font-family: Consolas;
        font-style: italic;
        border-style: solid;
        border-color: #e3f2fd;
      }
      .a {
        border-width: 10px;
      }
      .b {
        border-width: 10px 20px;
      }
      .c {
        border-width: 10px 20px 30px;
      }
      .d {
        border-width: 10px 20px 30px 40px;
      }
    </style>
  </head>
  <body>
    <p class="a">border-width: 10px;</p>
    <p class="b">border-width: 10px 20px;</p>
    <p class="c">border-width: 10px 20px 30px;</p>
    <p class="d">border-width: 10px 20px 30px 40px;</p>
  </body>
</html>

CSS Reference

CSS / Reference / empty-cells

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

CSS / Reference / overflow

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / Reference / background-attachment

개요 background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : ...

CSS / Reference / opacity

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. 숫자가 작을수록 투명해집니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS ...

CSS / Reference / word-break

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : 단어 ...

CSS / Reference / background-size

CSS / Reference / box-sizing

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / Reference / 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이면 단어가, ...

CSS / Reference / background-repeat

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 background-repeat의 값이 repeat이면, ...

CSS / Reference / line-height

개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...