CSS 박스 하단 경계 속성

정의 및 사용법

border-bottom 단축 속성은 아래 경계선의 모든 속성을 하나의 선언에 설정합니다.

다음과 같은 순서로 속성을 설정할 수 있습니다:

중간 값이 설정되지 않아도 문제가 발생하지 않습니다. 예를 들어, border-bottom:solid #ff0000;도 허용됩니다.

추가 참조:

CSS 강의:CSS 경계선

HTML DOM 참조 매뉴얼:borderBottom 속성

예제

아래 경계선 스타일을 설정합니다:

p
  {
  border-style:solid;
  border-bottom:thick dotted #ff0000;
  }

직접 테스트해 보세요

CSS 문법

border-bottom: border-width border-style border-color|initial|inherit;

속성 값

값 설명
border-bottom-width 아래 경계선의 너비를 정의합니다. 참조:border-bottom-width 가능한 값.
border-bottom-style 아래 경계선의 스타일을 정의합니다. 참조:border-bottom-style 가능한 값.
border-bottom-color 아래 경계선의 색상을 정의합니다. 참조:border-bottom-color 가능한 값.
inherit 부모 요소에서 border-bottom 속성 설정을 상속해야 합니다.

기술 세부 사항

기본 값: 미정
상속성: no
버전: CSS1
JavaScript 문법: object.style.borderBottom="3px solid blue"

더 많은 예제

모든 아래 경계선 속성이 하나의 선언에 있습니다
이 예제에서는 모든 아래 경계선 속성을 하나의 선언에서 설정하는 단축 속성을 사용해 보겠습니다.

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari 오페라
1.0 4.0 1.0 1.0 3.5

주석:IE7 및 이전 버전의 브라우저는 "inherit" 값을 지원하지 않습니다. IE8은 !DOCTYPE가 필요합니다. IE9는 "inherit"을 지원합니다.