border-width

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 / color

color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / calc()

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

CSS / Reference / font-family

font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / overflow

overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / aspect-ratio

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

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / background-attachment

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

CSS / Reference / font-weight

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

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / border-width

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