border-spacing

border-collapse 프로퍼티의 값이 separate인 경우에 서로 인접한 셀 보더 사이의 간격을 지정합니다. 값을 2개 지정한 때에는 첫 번째는 수편, 두번째는 수직 방향의 간격입니다. 테이블 또는 인라인 테이블 요소에 적용할 수 있습니다.

CSS Level

CSS 2

상속

예

기본값

0

사용법

border-spacing: 10px 5px;

object.style.borderSpacing = "15px"

속성

<length>

테이블 셀 보더 사이의 간격을 지정합니다.

border-collapse

테이블의 보더 모델을 지정합니다. 테이블 또는 인라인 테이블 요소에 적용할 수 있습니다.

CSS Level

CSS 2

상속

예

기본값

separate

사용법

border-collapse: collapse;

object.style.borderCollapse = "collapse"

속성

collapse

인접한 셀의 테두리를 합쳐서 표시합니다.

separate

셀의 테두리를 구분해서 표시합니다.

box-shadow

박스에 하나 이상의 그림자 효과를 지정합니다. 콤마(,)로 구분해서 여러 개의 효과를 지정할 수 있습니다.

CSS Level

CSS 3

상속

아니오

기본값

none

사용법

box-shadow: 5px 5px 3px #666, -5px -5px 3px #666;

object.style.boxShadow = "10px 10px 5px #888"

속성

none

그림자 효과를 사용하지 않습니다.

shadow

그림자 효과를 설정합니다. 

inset

이 키워드를 추가해서 지정하면 안쪽 그림자로 그립니다.

<length>

2~4개의 길이를 지정할 수 있습니다. 처음 값은 수평 방향, 두번째 값은 수직방향 거리입니다. 세번째 값은 블러 반지름이고, 네 번째 값은 퍼지는 거리입니다.

<color>

그림자의 색을 지정합니다.

예

<div style="width: 300px; height: 80px; border: 1px solid #666; border-radius: 5px; box-shadow:5px 5px 3px #666, inset 5px 5px 3px #999;">
box-shadow
</div>

box-shadow

box-decoration-break

박스가 페이지 브레이크이나 컬럼 브레이크으로 인해서 나뉘어졌거나 인라인 요소가 라인 브레이크로 나뉘어졌을 경우에 보더나 패딩의 추가 여부를 지정합니다.

CSS Level

CSS 3

상속

아니오

기본값

slice

사용법

box-decoration-break: clone;

속성

slice

잘려진 부분에는 보더나 패딩이 추가되지 않습니다.

clone

나누어진 각 부분 모두에 보더와 패딩 등이 적용됩니다.

왼쪽이 slice, 오른쪽이 clone입니다.

border-image

보더 이미지를 지정합니다. border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat를 한 번에 지정하는 단축형 프로퍼티입니다.
border-collapse가 collapse인 요소에는 적용되지 않습니다.

CSS Level

CSS 3

상속

아니오

사용법

border-image: url('border.png') 30 30 round;

object.style.borderImage = "url(border.png) 30 30 round"

속성

border-image-source

이미지 파일을 지정합니다.

border-image-slice

보더 이미지를 9영역으로 나눕니다.

border-image-width

보더 이미지 영역을 9영역으로 나눕니다.

border-image-outset

보더 이미지를 보더 영역 밖으로 확장합니다.

border-image-repeat

보더 이미지의 반복 여부를 지정합니다.

예

원본이미지

<div style="width: 300px; height: 80px; border: 12px solid #f00; border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJY5hDOsmiPXJkjcqEfTGPOWApVqtuh4vxgqNKfyfUfcaqMCDWncyo7sIqI4tImaVfKBT16xGpnvaJd9gKvu2I1qDs0RYVqtpb_rhBAkmHVxkdZixY5LNtBSoXhCV8gsqjYowLfeSDSI/s100/border.png') 12 fill">
<p>border-image</p>
</div>

border-image

border-image-repeat

보더 이미지의 각 부분들의 크기를 늘이거나 타일형식으로 반복되도록 지정합니다. 값을 2개까지 지정할 수 있으며, 첫 번째 값은 수평방향 두번째 값은 수직 방향입니다.

CSS Level

CSS 3

상속

아니오

기본값

stretch

사용법

border-image-repeat: round;

object.style.borderImageRepeat = "round"

속성

stretch

이미지를 늘입니다.

repeat

이미지를 반복합니다.

round

이미지를 반복합니다. 반복된 이미지의 횟수가 정수배가 되도록 크기를 조절합니다.

space

이미지를 반복합니다. 반복된 이미지의 횟수가 정수배가 되도록 하고 나머지 부분은 비워둡니다.

border-image-outset

보더 영역 밖으로 확장해서 그려질 크기를 지정합니다. 이렇게 확장된 영역은 스크롤되지 않으며 마우스 이벤트를 받지도 않습니다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서부터 시계방향으로 지정됩니다.

CSS Level

CSS 3

상속

아니오

기본값

0

사용법

border-image-outset: 30 30;

object.style.borderImageOutset = "30 30"

속성

<length>

길이 단위로 지정합니다.

<number>

border-width의 배율로 지정합니다.

border-image-width

보더 이미지가 그려질 영역을 9등분 하도록 각 변으로부터의 옵셋 거리를 지정합니다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서의 옵셋 거리부터 시계방향으로 지정됩니다.

CSS Level

CSS 3

상속

아니오

기본값

1

사용법

border-image-width: 30 30;

object.style.borderImageWidth = "30 30";

속성

<length>

길이 단위로 지정합니다.

<%>

보더 이미지 영역의 크기에 대한 비율로 지정합니다.

<number>

border-width에 대한 배율로 지정합니다.

auto

border-image-slice에 지정된 값을 따릅니다.

border-image-slice

보더 이미지를 9등분 하도록 각 변으로부터의 옵셋 거리를 지정합니다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서의 옵셋 거리부터 시계방향으로 지정됩니다.

CSS Level

CSS 3

상속

아니오

기본값

100%

사용법

border-image-slice: 50% 50%;

border-image-slice: 50 fill;

object.style.borderImageSlice = "50% 50%";

속성

<Number>

래스터 이미지의 경우 픽셀 거리를 지정하고, 벡터 이미지인 경우에는 좌표를 지정합니다.

<%>

이미지의 크기에 대한 상대적인 크기를 지정합니다.

속성 값 뒤에 fill을 붙이면 9 등분의 이미지 중 가운데 부분도 배경을 채우도록 지정합니다. fill이 지정되지 않은 때에는 가운데 부분은 사용되지 않습니다.
음수 값은 사용할 수 없고, 이미지의 크기보다 큰 값인 때에는 100%로 간주됩니다.

border-image-slice: 25% 30% 12% 20%;

border-image-source

보더에 사용할 이미지를 지정합니다. 이미지가 지정되면 border-style 대신에 사용됩니다.

CSS Level

CSS 3

상속

아니오

기본값

none

사용법

border-image-source: url('border.png');

object.style.borderImageSource="url(border.png)"

속성

none

보더에 이미지를 지정하지 않습니다.

<image>

보더에 사용할 이미지 파일의 URL을 지정합니다.

border-bottom-left-radius

왼쪽 아래 방향의 모서리를 둥글게 만들기 위한 반지름을 지정합니다. 만일 두 개의 값을 지정하면 첫 값은 수평 방향의 반지름, 두 번째 값은 수직방향의 반지름이 됩니다.

CSS Level

CSS 3

상속

아니오

기본값

0

사용법

border-bottom-left-radius: 2em;

object.style.borderBottomLeftRadius = "2em";

속성

<length>

1

<%>

1

border-bottom-right-radius

오른쪽 아래 방향의 모서리를 둥글게 만들기 위한 반지름을 지정합니다. 만일 두 개의 값을 지정하면 첫 값은 수평 방향의 반지름, 두 번째 값은 수직방향의 반지름이 됩니다.

CSS Level

CSS 3

상속

아니오

기본값

0

사용법

border-bottom-right-radius: 2em;

object.style.borderBottomRightRadius = "2em";

속성

<length>

1

<%>

1

border-top-right-radius

오른쪽 위 방향의 모서리를 둥글게 만들기 위한 반지름을 지정합니다. 만일 두 개의 값을 지정하면 첫 값은 수평 방향의 반지름, 두 번째 값은 수직방향의 반지름이 됩니다.

CSS Level

CSS 3

상속

아니오

기본값

0

사용법

border-top-right-radius: 2em;

object.style.borderTopRightRadius = "2em";

속성

<length>

1

<%>

1

border-top-left-radius

왼쪽 위 방향의 모서리를 둥글게 만들기 위한 반지름을 지정합니다. 만일 두 개의 값을 지정하면 첫 값은 수평 방향의 반지름, 두 번째 값은 수직방향의 반지름이 됩니다.

CSS Level

CSS 3

상속

아니오

기본값

0

사용법

border-top-left-radius: 2em;

object.style.borderTopLeftRadius = "2em";

속성

<length>

1

<%>

1

border-radius

보더의 모서리를 둥글게 만들기 위해 반지름을 지정합니다. border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius를 한번에 지정하기 위한 단축 프로퍼티 입니다.
값을 슬래시(/)로 구분해서 지정하면 앞의 값은 수평방향 반지름, 뒤의 값은 수직방향 반지름입니다.
4개의 값이 주어지면 왼쪽-위부터 시계 방향으로 지정됩니다.

CSS Level

CSS 3

상속

아니오

기본값

0

사용법

border-radius: 5px;

object.style.borderRadius = "5px";

속성

<length>

반지름을 길이 단위로 지정합니다.

<%>

반지름을 비율로 지정합니다.

border-left

왼쪽 방향의 보더에 대해서 두께와 스타일과 색상을 지정하는 단축형 프로퍼티입니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

아니오

사용법

border-left: thick double #ff0000;

object.style.borderLeft = "3px solid blue";

속성

<border-width> <border-style> <border-color>

두께, 스타일 색상을 지정합니다.

border-bottom

아래쪽 방향의 보더에 대해서 두께와 스타일과 색상을 지정하는 단축형 프로퍼티입니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

아니오

사용법

border-bottom: thick double #ff0000;

object.style.borderBottom = "3px solid blue";

속성

<border-width> <border-style> <border-color>

두께, 스타일 색상을 지정합니다.

border-right

오른쪽 방향의 보더에 대해서 두께와 스타일과 색상을 지정하는 단축형 프로퍼티입니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

아니오

사용법

border-right: thick double #ff0000;

object.style.borderRight = "3px solid blue";

속성

<border-width> <border-style> <border-color>

두께, 스타일 색상을 지정합니다.

border-top

위쪽 방향의 보더에 대해서 두께와 스타일과 색상을 지정하는 단축형 프로퍼티입니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

아니오

사용법

border-top: thick double #ff0000;

object.style.borderTop = "3px solid blue";

속성

<border-width> <border-style> <border-color>

두께, 스타일 색상을 지정합니다.

border-left-width

왼쪽 방향의 보더 두께를 지정합니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

아니오

기본값

medium

사용법

border-left-width: 15px;

object.style.borderLeftWidth = "thick";

속성

<border-width>

두께를 지정합니다.