CSS 테두리 및 박스 장식 모듈 레벨 4

1. 소개

이 모듈의 속성들은 테두리 영역의 장식과 관련이 있다. 또한 박스에 적용할 수 있는 장식도 정의한다.

1.1. 모듈 간 관계

이 명세는 CSS Backgrounds and Borders Module Level 3 [CSS3BG]의 테두리 및 박스 장식 관련 부분을 확장한다.

corner-*-shape와 border-shape 속성, border-*-radius, box-shadow-* 롱핸드의 논리 축약형, 그리고 border-limit 및 border-*-clip 속성을 통한 부분 테두리의 명세를 제공한다.

이 모듈의 모든 속성은 ::first-letter 의사 요소에 적용된다. border-radius 속성은 ::first-line 의사 요소에도 적용된다. UA는 (필요하지는 않지만) border-image 또는 box-shadow 속성을 ::first-line에 적용할 수 있다. UA는 border-color/style/width 속성을 ::first-line에 적용해서는 안 된다. [CSS2]

1.2. 값 정의

이 명세는 CSS 속성 정의 규약을 [CSS2]에서 따르며, 값 정의 문법은 [CSS-VALUES-3]을 따른다. 이 명세에서 정의하지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의한다. 다른 CSS 모듈과의 결합으로 이 값 타입의 정의가 확장될 수 있다. 예를 들어, CSS Images와 결합하면 CSS 그라디언트를 background-image 또는 border-image 값에 사용할 수 있다. [CSS-IMAGES-3]

각 속성 정의에 기재된 속성별 값 외에도, 이 명세에서 정의한 모든 속성은 CSS 전역 키워드를 속성 값으로 허용한다. 가독성을 위해 명시적으로 반복하지 않았다.

2. 테두리

테두리는 미리 정의된 스타일 (실선, 이중선, 점선, 의사 3D 테두리 등)일 수도 있고, 이미지일 수도 있다. 전자의 경우 다양한 속성이 테두리의 스타일(border-style), 색상(border-color), 두께(border-width) 을 정의한다.

2.1. 선 색상: border-color 속성

이 속성들은 테두리의 전경 색상을 border-style 속성에 따라 설정한다.

<image-1D>로 정의된 스트라이프는 해당되는 면의 테두리 형태를 따라가며, 패딩 에지에서 바깥쪽으로 진행되는 밴드로 그려진다. 각 지점에서의 테두리 두께가 그 지점에서의 스트라이프의 전체 너비를 결정한다.

.foo {
  border: 30px solid;
  border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
}

border-color는 네 개의 물리적 border-*-color 속성의 축약형 속성이다. 네 개의 값은 각각 위, 오른쪽, 아래, 왼쪽 테두리를 설정한다. 값 가운데 왼쪽이 없으면 오른쪽과 같으며, 아래가 없으면 위와 같고, 오른쪽이 없으면 위와 같다. 이 처리는 각 리스트 항목마다 개별적으로 적용된다.

흐름-상대 속성인 border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color는 물리적 속성인 border-top-color, border-bottom-color, border-left-color, border-right-color에 대응한다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라진다.

이 두 축약형 속성은 border-block-start-color & border-block-end-color 그리고 border-inline-start-color & border-inline-end-color를 각각 설정한다. 첫 번째 값은 start 측 색상, 두 번째 값은 end 측 색상에 해당한다. 하나의 값만 있으면 start 및 end 양쪽에 모두 적용된다.

2.2. 선 패턴: border-style 속성

이 속성들은 테두리의 표시 여부를 제어하며, 표시되는 경우 스타일이 어떻게 그려질지 결정한다 (border image로 오버라이드되지 않는 경우).

flow-상대 속성인 border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style는 물리적 속성인 border-top-style, border-bottom-style, border-left-style, border-right-style에 대응한다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라진다.

이 두 축약형 속성은 border-block-start-style & border-block-end-style 그리고 border-inline-start-style & border-inline-end-style를 각각 설정한다. 첫 번째 값은 start 측 스타일, 두 번째 값은 end 측 스타일에 해당한다. 하나의 값만 있을 경우, start 및 end 양쪽에 모두 적용된다.

border-style은 네 개의 물리적 border-*-style 속성의 축약형 속성이다. 네 개의 값은 각각 위, 오른쪽, 아래, 왼쪽 테두리를 설정한다. 왼쪽이 없으면 오른쪽과 같고, 아래가 없으면 위와 같고, 오른쪽이 없으면 위와 같다. 이 처리는 각 리스트 항목마다 개별적으로 적용된다.

스타일은 <line-style> 키워드로 지정하며,

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

각 값의 의미는 다음과 같다:

none

테두리가 없다. 색상과 너비는 무시된다(즉, 테두리의 너비가 0이 된다). 즉, border-image-width 의 초기값도 0이 된다.

hidden

none과 동일하지만, border-collapsed 테이블에 대한 테두리 충돌 해석에서 동작이 다르다. [CSS2].

dotted

둥근 점의 연속.

dashed

네모난 끄트머리의 대시(짧은 선분)들의 연속.

solid

단일 선분.

double

공간이 사이에 있는 평행한 두 개의 실선. (각 선의 두께는 명시되지 않으나, 두 선과 그 사이의 공간 합이 border-width와 같아야 한다.)

groove

캔버스에 파인 홈처럼 보인다. (보통 지정된 border-color보다 약간 더 밝은 것과 어두운 것 두 가지 색상을 이용해 "그림자" 효과를 내서 표현함.)

ridge

캔버스에서 튀어나온 능선처럼 보인다.

inset

테두리 안쪽 내용이 캔버스에 들어가 있는 것처럼 보인다. ridge와 같은 방식으로 테두리 병합 모델에서 처리된다. [CSS2]

outset

테두리 안쪽 내용이 캔버스 밖으로 올라온 것처럼 보인다. groove와 같은 방식으로 테두리 병합 모델에서 처리된다. [CSS2]

테두리는 요소의 배경 앞(위)에 그려지지만, 요소의 콘텐츠(겹치는 부분이 있다면) 뒤에 그려진다.

참고: 경계 색상이 검정이나 흰색에 가까우면 groove, ridge, inset, 또는 outset의 3D 효과를 만들기 위해 중간 색상과는 다른 색상 계산을 해야 할 수 있다.

참고: 점, 대시의 간격이나 대시의 길이에 대한 제어는 없다. 구현체는 모서리가 대칭이 되도록 간격을 선택하는 것이 권장된다.

2.3. 선 두께: border-width 속성

이 속성들은 테두리의 두께, 즉 테두리 너비를 지정한다. 여기서

<line-width> = <length [0,∞]> | thin | medium | thick

음수 값은 허용되지 않는다. thin, medium, thick 키워드는 각각 1px, 3px, 5px과 같다.

flow-상대 속성인 border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width는 물리적 속성인 border-top-width, border-bottom-width, border-left-width, border-right-width에 대응한다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라진다.

이 두 축약형 속성은 border-block-start-width & border-block-end-width 그리고 border-inline-start-width & border-inline-end-width를 각각 설정한다. 첫 번째 값은 start 측 너비, 두 번째 값은 end 측 너비에 해당한다. 하나의 값만 있을 경우, start 및 end 양쪽에 모두 적용된다.

border-width는 네 개의 물리적 border-*-width 속성의 축약형 속성이다. 네 개의 값은 각각 위, 오른쪽, 아래, 왼쪽 테두리를 설정한다. 왼쪽이 없으면 오른쪽과 같고, 아래가 없으면 위와 같고, 오른쪽이 없으면 위와 같다. 이 처리는 각 리스트 항목마다 개별적으로 적용된다.

참고: 초기 너비는 medium이지만, 초기 스타일은 none이므로 사용되는 초기 너비는 0이다.

2.4. 테두리 축약형 속성

이 축약형 속성들은 박스 한 면의 border-width, border-color, border-style을 설정한다. 생략된 값은 초기값으로 설정된다.

흐름-상대 속성인 border-block-start, border-block-end, border-inline-start, border-inline-end는 물리적 속성인 border-top, border-bottom, border-left, border-right에 대응한다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라진다.

이 두 축약형 속성은 border-block-start & border-block-end 또는 border-inline-start & border-inline-end를 각각 동일한 스타일로 설정한다.

border 속성은 요소의 네 개 테두리에 대해 동일한 border-width, border-color, border-style을 설정하는 축약형 속성이다. margin 및 padding 축약형과 달리, border 속성은 네 면에 다른 값을 지정할 수 없다. 네 면에 다르게 지정하려면 하나 이상의 다른 테두리 속성을 사용해야 한다.

border 축약형 속성을 사용하면 border-image도 초기값으로 재설정된다. 따라서, 앞선 단계에서의 테두리 설정을 재설정하려면 개별 속성이나 다른 축약형보다 border 축약형을 사용하는 것이 권장된다. 이렇게 하면 border-image도 재설정되어 새로운 스타일이 정상적으로 적용된다.

참고: CSS 작업 그룹은 border 축약형이 앞으로의 CSS 레벨에서도 모든 테두리 속성을 재설정하도록 의도하고 있다. 예를 들어, 향후 테두리로 글리프를 허용하는 border-characters 속성이 도입된다면, 역시 border 축약형으로 재설정된다. border 축약형을 사용해 테두리를 리셋하면, 미래에 어떤 속성이 추가되더라도 "빈 캔버스"가 보장된다.

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

특정 속성들이 어느 정도 기능이 겹치므로, 규칙을 지정하는 순서가 중요하다.

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

3. 모서리

패딩 에지(내부 테두리)의 반지름은 외부 테두리 반지름에서 해당 테두리 두께를 뺀 값이다. 이 결과가 음수가 되면 내부 반지름은 0이 된다. (이런 경우 테두리 내측 곡선의 중심이 외측 곡선의 중심과 일치하지 않을 수 있다.) 마찬가지로 컨텐츠 엣지의 반지름은 패딩 엣지 반지름에서 해당 패딩을 뺀 값이며, 그 값이 음수이면 0이 된다. 곡선 영역의 테두리와 패딩 두께는 이웃한 면에서 보간되어 결정되며, 이웃한 두 테두리 두께가 다를 경우 모서리는 두께가 두꺼운 테두리와 얇은 테두리 사이에서 부드럽게 전이된다.

모든 테두리 스타일(solid, dotted, inset 등) 은 테두리의 곡선을 따른다.

참고: 모서리의 외부 곡선의 중심이 반대편 패딩 엣지를 넘어서 있으면(코너와 반대편 면의 테두리 영역), 내부 곡선은 4분의 1 타원이 되지 않는다.

p { width: 70px; height: 70px; border: solid 30px; border-color: orange orange silver silver; border-top-right-radius: 100%; }

마진 에지는 테두리 에지의 외부에 있으므로, 각 테두리 반지름에 해당 마진 두께를 더하여 outset-조정 테두리 반지름을 적용해 반지름을 계산한다.

3.1. 모서리 클리핑

border images는 border-radius의 영향을 받지 않지만, 테두리, 패딩 또는 컨텐츠 에지에 그리기나 이벤트 처리가 클리핑될 때 각 곡선을 따라 반드시 클립해야 한다. 예를 들어, 배경은 background-clip이 만든 곡선에, overflow 값이 visible이 아니면 곡선 패딩 엣지에 (overflow가 양축 모두 visible이 아닐 때), 교체 요소의 컨텐츠는 곡선 content edge에, 포인터 이벤트는 곡선 border edge에 등으로 클리핑해야 한다.

참고: border-radius는 요소의 인터랙티브 영역을 줄이므로 남은 인터랙션 영역이 각 플랫폼의 권장 최소값을 만족하는지 확인해야 한다. 특히, border-radius를 사용하면 권장 터치 타깃 최소 크기를 충족하기 위해 더 넓은 폭과 높이가 필요할 수 있다.

DIV {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em }

3.2. 색상 및 스타일 전이

색상 및 스타일 전이는 반드시 두 테두리 반지름과 내부 곡선의 중심(테두리 반지름이 border width보다 작을 땐 패딩 에지 코너일 수 있음) 을 모두 포함하는 최소 사각형 내의 테두리 구간 안에 있어야 한다.

이 중 한 테두리가 0 너비라면 다른 쪽 테두리가 전이 영역 전체를 차지한다. 그렇지 않으면 이웃 테두리의 색상 및 스타일 전이 중심은 두 테두리 너비의 비율에 따른 곡선 위 한 점이며 이 함수는 연속 단조(monotonic) 함수이다. 다만, 실제 전이 효과나 이 비율이 곡선점에 어떻게 매핑되는지는 명확히 정의되어 있지 않다.

3.3. 곡선 중첩

모서리 곡선은 중첩되어선 안 된다: 인접한 두 테두리 반지름의 합이 테두리 박스의 크기를 초과할 때는, UA는 모든 테두리 반지름의 사용값을 비례적으로 줄여서 어느 것도 겹치지 않도록 해야 한다. 반지름 축소 알고리즘은 다음과 같다:

f = min(L_i/S_i)라고 할 때, i ∈ {top, right, bottom, left}, S_i는 각 면의 두 코너 반지름의 합, L_top = L_bottom = 박스의 너비, L_left = L_right = 박스의 높이. f < 1이면 모든 코너 반지름을 f만큼 곱해 축소한다.

참고: 이 공식은 1/4 원은 그대로 1/4 원이 되게 하고, 큰 반지름은 작은 것보다 더 크게 유지되나, 이미 충분히 작은 것도 더 줄어들 수 있어서 주변 요소의 테두리가 같아 보여야 하는데 달라질 수 있다.

만약 곡선이 스크롤바 등 UI 요소와 충돌하면 UA는 해당 테두리 반지름의 사용값만(그리고 필요한 만큼만) 더 줄일 수 있다.

예를 들어, 아래 그림의 A 테두리는

box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em

높이(2.5em)는 지정한 반지름(0.5em+2.0em) 둘 다 충분하다. 하지만 높이가 2em일 경우,

box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em

네 코너 모두를 0.8만큼 곱해 줄여야 맞아 들어간다. 따라서 사용된 테두리 반지름은 0.4em(원래 0.5em → 0.4em), 1.6em(2em → 1.6em)이다. 그림의 B 영역 참고.

3.4. 테이블에 미치는 영향

border-radius 속성은 table, inline-table, table-cell 박스에도 분리된 테두리 모드(border-collapse: separate)에서 적용된다. border-collapse가 collapse일 땐 효과가 없다.

3.5. 모서리 크기: border-*-*-radius 속성

반지름은 <border-radius> 값으로 지정하며,

<border-radius> = <slash-separated-border-radius-syntax> | <legacy-border-radius-syntax>
<slash-separated-border-radius-syntax> = <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?
<legacy-border-radius-syntax> = <length-percentage [0,∞]>{1,2}

두 개의 <length-percentage> 값은 border-*-radius 속성의 모서리 부분을 정의하는 4분의 1 타원의 반지름을 지정합니다. 이는 외부 border edge의 모서리 형태를 결정합니다(아래 다이어그램 참조). 첫 번째 값은 수평 반지름, 두 번째는 수직 반지름입니다. 두 번째 값이 생략되면 첫 번째 값을 복사해 사용합니다. 길이 중 하나가 0이면, 모서리는 둥글지 않고 네모납니다. 수평 반지름의 백분율 값은 border box의 너비를 기준으로 하며, 수직 반지름의 백분율 값은 border box의 높이를 기준으로 합니다. 음수 값은 유효하지 않습니다.

참고: 새 콘텐츠에는 slash 문법을 권장하며, 구문 호환 목적으론 공백 분리 구문도 지원한다.

DIV.standout {
    width: 13em;
    height: 8em;
    border: solid black 1em;
    border-radius: 7.5em 5em }

flow-상대 속성인 border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius는 물리적 속성 border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius와 대응된다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 정해지며 처음 start/end가 block 축, 두 번째가 inline 축 방향을 지정한다 (즉, 'border-block-inline-radius' 패턴).

3.6. 모서리 크기 축약: border-radius 및 border-*-radius 축약 속성

3.6.1. 한 쪽 모서리의 크기 지정: 다음 축약 속성: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius 축약

border-*-radius 축약은 관련 면의 두 border-*-*-radius 롱핸드 속성을 설정합니다. 값이 슬래시 앞뒤로 주어지면, 슬래시 앞의 값은 수평 반지름을 설정하고 슬래시 뒤의 값은 수직 반지름을 설정합니다. 슬래시가 없으면 값은 두 반지름을 동일하게 설정합니다. 반지름을 위한 두 값은 다음 순서로 주어집니다: border-top-radius의 경우 top-left, top-right; border-right-radius의 경우 top-right, bottom-right; border-bottom-radius의 경우 bottom-left, bottom-right; border-left-radius의 경우 top-left, bottom-left; border-block-start-radius의 경우 start-start, start-end; border-block-end-radius의 경우 end-start, end-end; border-inline-start-radius의 경우 start-start, end-start; 그리고 border-inline-end-radius의 경우 start-end, end-end. 두 번째 값이 생략되면 첫 번째 값이 복사됩니다.

3.6.2. 모든 모서리를 한 번에 크기 지정: border-radius 축약

The border-radius 축약은 네 개의 border-*-radius 속성을 모두 설정합니다. 값이 슬래시 앞뒤로 주어지면, 슬래시 앞의 값은 수평 반지름을 설정하고 슬래시 뒤의 값은 수직 반지름을 설정합니다. 슬래시가 없으면 값은 두 축의 반지름을 동일하게 설정합니다. 각 반지름에 대한 네 값은 다음 순서로 주어집니다: top-left, top-right, bottom-right, bottom-left. bottom-left가 생략되면 top-right와 같습니다. bottom-right가 생략되면 top-left와 같습니다. top-right가 생략되면 top-left와 같습니다.

border-radius: 4em;

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

border-radius: 2em 1em 4em / 0.5em 3em;

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

3.7. 모서리 형태 지정: corner-*-shape 속성

기본적으로, 0이 아닌 border-radius 값은 해당 모서리를 둥글게 만드는 4분의 1 타원(corner shape)을 정의하여 그 모서리에 대해 정의된 corner area를 채웁니다. 그러나 경우에 따라 다른 모서리 형태가 필요할 수 있습니다. corner-*-shape 속성들(및 그 축약)은 corner shapes이 border-*-radius 값으로 정의되는 영역에 대해 상자에서 정확히 어떤 형태를 사용할지 지정합니다.

다양한 모서리 형태는 모두 superellipse의 서로 다른 매개변수로 표현할 수 있습니다. 슈퍼엘립스는 타원의 일반화이며, 그 k 매개변수에 따라 정사각형, 타원 및 노치 사이의 모든 형태를 표현할 수 있습니다.

완전한 표현과 보간(interpolation)을 허용하기 위해, corner-shape 속성은 superellipse 인수를 직접 제공할 수 있는 superellipse() 함수를 사용하거나, 일반적으로 사용되는 매개변수를 나타내는 키워드들 중 하나를 사용할 수 있습니다. 자세한 내용은 <corner-shape-value> 정의를 참조하세요.

corner-*-*-shape 롱핸드 속성들은 주어진 모서리에 대한 모서리 형태를 설정합니다.

흐름-상대(flow-relative) 롱핸드들 (corner-start-start-shape 등)은 요소의 writing-mode, direction, 및 text-orientation에 따라 물리적(physical) 롱핸드들 (corner-top-left-shape 등)에 대응합니다. 첫 번째 start/end는 블록 축 측면을 나타내고, 두 번째는 인라인 축 측면을 나타냅니다 (즉 corner-block-inline-shape로 패턴화됨).

<corner-shape-value> = round | scoop | bevel | notch | square | squircle |
                       <superellipse()>
superellipse() = superellipse(<number> | infinity | -infinity)

round

모서리 형태는 볼록한 타원의 4분의 1입니다. superellipse(1)과 동일합니다.

Note: 이것은 corner-shape 속성들의 초기값이며, 이는 border-radius가 corner-shape가 도입되기 전의 동작이었기 때문입니다.

squircle

모서리 형태는 round과 square 사이의 볼록한 곡선인 "스퀴클"의 4분의 1입니다. superellipse(2)와 동일합니다.

square

모서리 형태는 볼록한 90도 각입니다. superellipse(infinity)와 동일합니다.

Note: 이것은 border-radius: 0에서 얻는 "일반" 정사각형 모서리와 시각적으로 동일하게 보이지만, 다른 corner-shape 값들과 부드럽게 애니메이션할 수 있습니다.

bevel

모서리 형태는 볼록하지도 오목하지도 않은 직선 대각선입니다. superellipse(0)와 동일합니다.

scoop

모서리 형태는 오목한 4분의 1 타원입니다. superellipse(-1)와 동일합니다.

notch

모서리 형태는 오목한 90도 각입니다. superellipse(-infinity)와 동일합니다.

superellipse(K)

모서리 형태는 슈퍼엘립스의 4분의 1입니다. 인수 K는 슈퍼엘립스 매개변수이며, 지수 2^K를 사용하여 슈퍼엘립스를 정의합니다.

슈퍼엘립스의 수학적 정의와 다양한 K 값이 의미하는 바에 대한 설명은 § 3.7 Corner Shaping: the corner-*-shape properties의 주석을 참조하세요. 슈퍼엘립스가 계산되고 렌더링되는 정확한 세부사항은 § 3.9.4 Rendering corner-shape를 참조하세요.

Note: 만약 border-radius가 지정되지 않았거나 0으로 설정되어 있다면, corner area도 크기가 0이며, corner-shape는 아무 효과가 없습니다.

corner-*-shape은 overflow 규칙을 변경하지 않습니다. 다만 모서리를 다르게 형성할 뿐이며; 요소들은 여전히 형성된 테두리에 의해 정상적으로 클립됩니다.

corner-*-shape이 지정하는 곡선은 테두리의 외곽 가장자리를 정의합니다. 테두리의 내부 가장자리는 외부 가장자리의 곡선을 따라갑니다 (반드시 슈퍼엘립스 곡선으로 표현 가능하지 않을 수 있음), 외부 가장자리 전체에 걸쳐 거의 일관된 거리를 유지합니다, (혹은 모서리에서 만나는 두 테두리 가장자리의 border-width가 균일하지 않다면 선형으로 증가하는 거리입니다).

corner-*-shape은 box-shadow의 렌더링과, 상자에서 확장될 때 overflow clip edge가 어떻게 형성되는지에도 영향을 미치지만, 이들은 내부 테두리 가장자리처럼 직접적으로 corner-*-shape 경로를 따르지 않습니다. 대신, 그것은 corner-shape 경로를 축에 정렬된 방식으로 스케일합니다.

3.8. 모서리 형태 축약: corner-shape 및 corner-*-shape 축약 속성

3.8.1. 한 쪽 모서리 형태 지정: corner-*-shape 축약:

corner-*-shape 축약은 해당 면의 두 corner-*-*-shape 속성을 설정합니다. 값이 하나만 주어진 경우, 두 번째 값은 첫 번째 값과 같습니다.

물리적 축약(corner-top-shape 등)에서는 값이 left/right 또는 top/bottom 순서로 오며, 속성에 따라 의미 있는 축으로 지정됩니다. 즉, corner-top-shape: round square는 corner-top-left-shape: round; corner-top-right-shape: square;로 설정됩니다.

논리적 축약(corner-block-start-shape 등)에서는, 값이 항상 다른 축의 start/end 순으로 주어집니다. 즉, corner-block-start-shape: round square는 corner-start-start-shape: round; corner-start-end-shape: square;로 설정됩니다.

3.8.2. 모든 모서리 형태 한 번에 지정: corner-shape 축약

corner-shape 속성은 border-radius로 지정된 영역 내의 상자 모서리 형태를 정합니다. 네 개 값은 각각 top, right, bottom, left 형태를 지정합니다. left 생략시는 right와 같고, bottom 생략시는 top과 같으며, right 생략시 역시 top과 같습니다.

3.9. 모서리 크기 및 형태 축약: corner 및 corner-* 축약 속성

3.9.1. 한 모서리 크기 & 형태 지정: corner-top-left, corner-top-right, corner-bottom-right, corner-bottom-left, corner-start-start, corner-start-end, corner-end-start, corner-end-end 축약

corner-*-* 축약은 해당 면의 두 corner-*-*-shape 및 border-*-*-radius 롱핸드 속성을 설정합니다. 자세한 내용은 각각의 corner-*-*-shape 및 border-*-*-radius 속성을 참조하세요.

3.9.2. 한 쪽 모서리 크기 & 형태 지정: corner-top, corner-right, corner-bottom, corner-left, corner-block-start, corner-block-end, corner-inline-start, corner-inline-end 축약

corner-* 축약은 해당 면의 두 corner-*-shape 롱핸드 속성과 두 border-*-radius 롱핸드 속성을 설정합니다. 자세한 내용은 각각의 corner-*-shape 및 border-*-radius 속성을 참조하세요.

3.9.3. 모든 모서리 크기 & 형태 한 번에 지정: corner 축약

corner 축약은 corner-*-shape 및 border-*-radius 롱핸드 속성을 모두 한 번에 설정합니다.

3.9.4. corner-shape 렌더링

모서리 형태가 적용된 요소를 렌더링할 때, 요소의 경로는 border, outline, box-shadow, overflow-clip-margin 등 여러 요소에 따라 오프셋되어야 합니다.

테두리(border)나 외곽선(outline)을 렌더링할 때는 오프셋이 요소의 곡선에 정렬되어 있고, box-shadow나 overflow-clip-margin의 오프셋은 축(axis)에 정렬됩니다.

element element의 outer contour는 element와 element의 border contour path를 통해 얻어지는 element의 border edge입니다.

element element의 inner contour는 element와 element의 border contour path를 통해 얻어지는 element의 padding edge입니다.

element의 border는 outer contour와 inner contour 사이 영역에 렌더링됩니다.

element의 outline은 outer contour를 따라 그리고 used outline-width 및 outline-offset을 사용합니다. 정확한 렌더링 방식은 구현에 따라 다릅니다.

element의 overflow 영역은 inner contour에 의해 모양이 정해집니다. element의 overflow clip edge는 element와 element의 border contour path, element의 padding edge, element의 used overflow-clip-margin에 의해 형성됩니다.

element의 각 box shadow는 element와 element의 border contour path, border edge, 그림자의 used box-shadow-spread로 형상이 결정됩니다.

3.9.5. 반대쪽 반지름 제한

오목한 corner-shape 값이 있을 때(superellipse 매개변수가 음수인 경우), 대각선으로 마주보는 모서리가 서로 겹칠 수 있습니다.

div {
  corner-shape: scoop;
  border-top-left-radius: 80%;
  border-bottom-right-radius: 80%;
}

이를 방지하기 위해 네 개의 반지름에 제한을 두어 겹침을 막습니다. 이는 각 모서리마다 hull polygon을 계산하고, 서로 대각선에 위치한 hull polygon이 겹치지 않도록 두 모서리에 적용할 수 있는 최대 축소 계수를 찾는 방법으로 수행합니다.

3.9.6. 모서리 형태 보간

<corner-shape-value>는 항상 superellipse() 및 superellipse 매개변수 변수로 표현될 수 있으므로, 두 <corner-shape-value>를 보간할 때는 superellipse 매개변수 자체를 보간합니다. log2을 사용하므로 단순 선형 보간 시 오목형은 볼록형보다 훨씬 더 빠르게 변화하는 효과가 납니다. 이를 균형 있게 하기 위해 superellipse interpolation 공식은 superellipse 매개변수를 0~1로 변환 또는 역변환하는 방법을 설명합니다:

superellipse 매개변수 s를 0~1 보간 값으로 변환할 땐, normalized superellipse half corner 값을 반환합니다.

4. 경계선 이미지

작성자는 테두리 스타일 대신 사용할 이미지를 지정할 수 있습니다. 이 경우, 테두리 디자인은 border-image-source로 지정된 이미지의 변 두께와 모서리에서 가져오며, 이미지 조각은 다양한 방법으로 잘리거나, 스케일되거나, 늘어나서 border image area 크기에 맞춰질 수 있습니다. border-image 속성은 레이아웃에 영향을 미치지 않습니다: 상자의 레이아웃, 내용, 주변 내용 배치는 border-width 및 border-style 속성에만 기반합니다.

DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }

이 예시는 더 복잡한 사용법을 보여줍니다. border image가 fallback border-style과 일치하는 방식과, 경계선 영역 확장도 보여줍니다. border image는 파도치는 녹색 경계에 확장된 코너 효과를 가집니다:

나머지 border 속성은 아래와 같이 타일을 배치하는 데 작동합니다:

여기서 border-width 값은 12px 이지만, border-image-width는 124px로 계산됩니다. border image area는 border box에서 31px 바깥, margin area쪽으로 확장됩니다. border-image를 불러오지 못하거나(또는 UA가 지원하지 않으면) fallback 렌더링에서 녹색 double border가 사용됩니다.

.notebox {
  border: double orange;
  /* 반드시 'border' 축약을 먼저 지정해야 함. 그렇지 않으면 'border-image'가 사라짐 */
  border-image: url("border.png") 30 round;
  /* 그 뒤에 다른 'border' 속성 설정 가능 */
  border-width: thin thick;
}
...
.sidebar .notebox {
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
  border: none; /* 모든 border 삭제 */
  /* 'border' 축약은 'border-image'도 초기화 */
}

4.1. 이미지 소스: border-image-source 속성

border-style 속성들에 의해 지정된 렌더링 대신, 테두리로 사용할 이미지를 지정합니다. 그리고 fill 키워드가 border-image-slice에 주어지면, 요소의 추가 이미지 배경으로도 사용됩니다. 값이 none이거나 이미지를 표시할 수 없거나(또는 속성이 적용되지 않으면), 테두리 스타일이 사용됩니다. 그렇지 않으면 요소의 border-style 테두리는 그려지지 않고, 이 테두리 이미지가 아래에서 설명하는 대로 그려집니다.

4.2. 이미지 분할: border-image-slice 속성

이 속성은 이미지의 위, 오른쪽, 아래, 왼쪽 가장자리에서 안쪽으로의 옵셋을 지정하여 이미지를 9영역으로 분할합니다: 4개의 모서리, 4개의 변, 그리고 중앙 영역. fill 키워드가 없으면 중앙 이미지 부분은 버려지며(완전히 투명한 것으로 처리), 배경 위에 그려지지 않습니다. (배경 위에 그려짐; 테두리 이미지 그리기 참조.)

값이 하나만 있으면 모든 변에 적용됩니다. 값이 두 개이면 위/아래는 첫 번째 값, 왼쪽/오른쪽은 두 번째 값이 적용됩니다. 값이 세 개이면 위는 첫 번째, 왼쪽과 오른쪽은 두 번째, 아래는 세 번째 값이 적용됩니다. 값이 네 개이면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

<percentage [0,∞]>

백분율은 이미지 크기를 기준으로 계산됩니다: 수평 옵셋은 이미지의 너비를 기준으로, 수직 옵셋은 이미지의 높이를 기준으로 합니다.

<number [0,∞]>

숫자는 래스터 이미지일 경우 이미지 내부의 픽셀을, 벡터 이미지일 경우 벡터 좌표를 나타냅니다.

fill

fill 키워드가 있으면 테두리 이미지의 중앙 부분이 보존됩니다. (기본값은 버려짐, 즉 빈 것으로 처리됨.)

음수 값은 유효하지 않습니다. 계산값이 이미지 크기보다 크면 100%로 해석됩니다.

border-image-slice 값으로 지정된 영역들은 겹칠 수 있습니다. 다만, 왼쪽과 오른쪽 너비의 합이 이미지 너비 이상이면 위/아래 변 및 중앙 부분의 이미지는 비어 있게 됩니다 — 이는 해당 부분에 비어 있지 않은 투명 이미지가 지정된 것과 같은 효과입니다. 위/아래 값의 경우에도 동일하게 적용됩니다.

슬라이스를 결정하기 위해 이미지의 크기 조정이 필요할 경우(예: natural dimensions가 없는 SVG), 이미지는 기본 크기 지정 알고리즘을 사용하여 크기 조정되며, 지정된 크기는 없고 border image area가 기본 객체 크기로 사용됩니다.

4.3. 그릴 영역: border-image-width 속성

border image는 border image area라 불리는 영역 내부에 그려집니다. 이 영역의 경계는 기본적으로 border box에 해당합니다, border-image-outset 참조.

border-image-width의 네 값은 border image area를 9개의 영역으로 나누는 데 사용되는 옵셋을 지정합니다. 옵셋은 각각 영역의 위, 오른쪽, 아래, 왼쪽 가장자리에서 안쪽으로의 거리입니다.

값이 하나만 있으면 모든 변에 적용됩니다. 값이 두 개이면 위/아래는 첫 번째 값, 왼쪽/오른쪽은 두 번째 값이 적용됩니다. 값이 세 개이면 위는 첫 번째, 왼쪽과 오른쪽은 두 번째, 아래는 세 번째 값이 적용됩니다. 값이 네 개이면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

값의 의미는 다음과 같습니다:

<length-percentage [0,∞]>

백분율은 border image area의 크기를 기준으로 합니다: 수평 옵셋은 영역의 너비를, 수직 옵셋은 영역의 높이를 기준으로 합니다.

<number [0,∞]>

숫자는 해당 계산된 border-width의 배수를 나타냅니다.

auto

auto가 지정되면, 사용되는 border-image-width는 해당 이미지 슬라이스의 natural 너비 또는 높이(해당되는 쪽)입니다(자세한 내용은 border-image-slice 참조). 이미지에 필요한 natural dimension이 없으면 대신 해당 계산된 border-width가 사용됩니다.

어떤 border-image-width 값에도 음수 값은 유효하지 않습니다.

두 반대편 border-image-width 옵셋이 충분히 커서 겹치는 경우, 모든 border-image-width 옵셋의 사용 값은 서로 겹치지 않을 때까지 비례적으로 축소됩니다. 수학적으로: L_width를 border image area의 너비, L_height를 높이, 그리고 W_side를 side 쪽의 border-image-width 옵셋이라 하면, f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom)). 만약 f < 1이면, 모든 W는 f를 곱하여 줄여집니다.

4.4. 모서리 돌출: border-image-outset 속성

값들은 border image area가 border box를 넘어서 확장되는 양을 지정합니다.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

<length [0,∞]>

지정된 길이만큼의 돌출을 나타냅니다.

<number [0,∞]>

해당 계산된 border-width의 배수만큼의 돌출을 나타냅니다.

음수 값은 유효하지 않습니다.

border box 밖에 렌더링된 border-image의 부분은 border box 외부의 ink overflow로 간주되며 스크롤을 유발하지 않습니다. 또한 그러한 부분은 마우스 이벤트에 대해 보이지 않으며 요소를 대신해 이벤트를 캡처하지 않습니다.

Note: 비록 스크롤 메커니즘을 유발하지 않지만, 돌출된 이미지는 조상 요소나 뷰포트에 의해 잘릴 수 있습니다.

4.5. 이미지 타일링: border-image-repeat 속성

이 속성은 border image의 변들과 중앙 부분에 대한 이미지들이 어떻게 스케일되고 타일링되는지를 지정합니다. 첫 번째 키워드는 위/중앙/아래 부분의 수평 스케일링 및 타일링에 적용되고, 두 번째 키워드는 왼쪽/중앙/오른쪽 부분의 수직 스케일링 및 타일링에 적용됩니다; Drawing the Border Image을 참조하세요. 두 번째 키워드가 없으면 첫 번째와 동일한 것으로 간주됩니다. 값들의 의미는 다음과 같습니다:

stretch

이미지가 해당 영역을 채우도록 늘려집니다.

repeat

이미지를 타일(반복)하여 해당 영역을 채웁니다.

round

이미지를 타일(반복)하여 해당 영역을 채웁니다. 만약 전체 타일 수가 정수가 되지 않으면, 이미지는 정수가 되도록 재스케일됩니다.

space

이미지를 타일(반복)하여 해당 영역을 채웁니다. 만약 전체 타일 수가 정수가 되지 않으면, 남는 공간이 타일 주위에 분배됩니다.

border-image 부분의 정확한 스케일링 및 타일링 절차는 아래 섹션에 설명되어 있습니다.

4.6. 테두리 이미지 그리기

border image 가 border-image-source로 지정된 후 border-image-slice 값에 따라 슬라이스되면, 결과로 생성된 9개의 이미지는 네 단계로 각각의 border image regions에 스케일, 위치 지정, 타일링됩니다:

1. border-image-width에 맞게 스케일합니다.
   • 위/아래 변의 두 이미지는 각각 위/아래 border image regions와 같은 높이가 되도록 맞추고, 너비는 비율적으로 스케일합니다.
   • 왼쪽/오른쪽 변 이미지는 각각 왼쪽/오른쪽 border image regions와 같은 너비가 되도록 하고, 높이는 비율적으로 스케일합니다.
   • 코너 이미지는 각각의 border image regions와 같은 너비 및 높이로 스케일합니다.
   • 중앙 이미지는 위 이미지와 동일한 비율로 너비를 스케일합니다. 단, 그 비율이 0 또는 무한대라면 아래 비율을 대신 사용하며, 모두 해당 없으면 너비는 스케일하지 않습니다. 높이는 왼쪽과 동일하게 맞추며, 역시 0 또는 무한대라면 오른쪽을 대신 사용하고, 모두 해당 없으면 스케일하지 않습니다.
2. border-image-repeat에 맞게 스케일합니다.
   • 첫 번째 키워드가 stretch인 경우, 위/중앙/아래 이미지는 border image area의 중앙 영역 만큼 너비가 늘어나며, 높이는 더 이상 변경하지 않습니다.
   • 첫 번째 키워드가 round라면, 위/중앙/아래 이미지는 중앙 영역 안에 정확히 정수개의 이미지가 맞도록 너비가 조정됩니다. (round와 동일하게 적용)
   • 첫 번째 키워드가 repeat 또는 space라면, 위/중앙/아래 이미지는 더 이상 크기 조정하지 않습니다.
   • 두 번째 키워드의 stretch, round, repeat, space 효과 역시, 각각 왼쪽/중앙/오른쪽 이미지의 높이에 대해 유사하게 동작합니다.
3. 첫 번째 타일의 위치 지정.
   • 첫 번째 키워드가 repeat일 경우, 위/중앙/아래 이미지는 각각 자기 영역 내에서 수평 중앙에 배치됩니다. 아니라면 해당 이미지는 border image area의 자기 영역 왼쪽에 배치됩니다.
   • 두 번째 키워드가 repeat이면, 왼쪽/중앙/오른쪽 이미지는 자기 영역 내에서 수직 중앙, 아니면 border image area의 자기 영역 상단에 배치됩니다.
4. 타일링 및 그리기.
   • 이미지는 각 자기 영역을 채우도록 타일링됩니다.
   • space의 경우, 부분 타일은 버리고 남은 공간을 타일 앞/뒤/사이에 고르게 분배합니다. (즉, 첫 타일 앞 간격, 마지막 타일 뒤 간격, 그리고 타일 사이 간격이 동일하게 맞춰짐) 이로 인해 border-image side 영역이 비는 경우가 있습니다.
   • 이미지는 보통 border와 같은 스택 레벨에서 그려집니다(즉, background layer 위에).
   • fill이 border-image-source에 지정된 경우가 아니면 중앙 이미지는 그려지지 않습니다.

4.7. 테두리 이미지 축약: border-image 속성

이 속성은 border-image-source, border-image-slice, border-image-width, border-image-outset, 그리고 border-image-repeat를 한 번에 지정하는 축약 속성입니다. 생략된 값들은 초기값으로 설정됩니다.

4.8. 테이블에 미치는 영향

border-image 속성은 border-collapse가 collapse로 설정된 테이블 및 인라인 테이블의 테두리에 적용됩니다. 단, 이 명세는 이러한 이미지 테두리가 어떻게 렌더링되는지 정의하지 않습니다. 특히, 이미지 테두리와 테이블 가장자리의 셀, 행, 행 그룹 테두리가 어떻게 상호작용하는지 정의하지 않습니다 (border conflict resolution 참고, [CSS2]).

향후 명세에서 렌더링을 정의할 것으로 예상됩니다. 그때까지 UA가 border image를 collapse된 테이블에 적용하지 않는 것이 권장됩니다.

5. 부분 테두리

CSS 테두리는 전통적으로 전체 테두리 경계를 덮습니다. 그러나 때로는 테두리의 일부를 숨기고 싶을 수 있습니다.

아래는 그 방법에 대한 두 가지 제안이며: 두 번째는 GCPM, 첫 번째는 보다 읽기 쉽도록 다시 구성한 시도입니다. 명칭이 별로지만, 잘 아는 문제이며 대안 제안도 환영합니다. 클리핑으로만 생각하면 문제가 있습니다: 점선 테두리의 경우, 점이 항상 온전히 보여야 하며 점 일부만 보여서는 안 됩니다. 따라서 클립이 아닌 드로우 리밋이어야 합니다.

5.1. 부분 테두리: border-limit 속성

기본적으로 전체 테두리가 그려집니다. 하지만 일부 테두리만 그리도록 렌더링 범위를 제한할 수 있습니다. 키워드는 어느 부분인지를, 길이나 백분율은 길이를 지정합니다.

all

전체 테두리를 그립니다.

sides

모서리는 제외, 변만 그립니다(테두리 반지름이 정의). 길이나 백분율은 각 변의 중앙에서 측정: 50%는 변의 중간 50%만 그립니다. 기본값은 전체 변을 그림.

corners

모서리와, 명시된 경우 변 쪽으로 지정 거리만큼까지 그립니다. 길이는 모서리 영역의 가장자리에서 측정. 백분율은 border box의 절대 모서리에서 측정.

left

right

left/right(수직) 변은 전체 변 및 모서리를 그림. top/bottom(수평) 변은 left/right 쪽만 지정대로 그립니다. 거리는 corners와 동일하게 측정.

top

bottom

top/bottom(수평) 변은 전체 변 및 모서리를 그림. left/right(수직) 변은 지정대로 top/bottom 쪽만 그림. 거리는 corners와 동일하게 측정.

div {
  border: solid;
  border-limit: sides 50%;
}

div {
  border: solid;
  border-radius: 1em 2em;
  border-limit: corners;
}

div {
  border-top: solid;
  border-limit: left 4em;
}

div {
  border: solid;
  border-limit: corners 10px;
}

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 5px;
}

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 30%;
}

5.2. border-clip 속성

이들 속성은 각 테두리를 border edge를 따라 여러 부분으로 나눕니다. 첫 번째 부분은 보이고, 두 번째는 숨겨지며, 세 번째는 다시 보이는 식입니다. 부분들은 길이, 백분율 또는 유연 길이(예: fr 단위; [CSS3GRID] 참고)로 지정할 수 있습니다. none 값은 테두리를 분할하지 않고 일반적으로 표시함을 의미합니다.

flow-relative 롱핸드(border-block-start-clip 등)는 요소의 writing-mode, direction, 및 text-orientation에 따라 physical 롱핸드(border-top-clip 등)와 대응됩니다.

이 두 축약 속성은 각각 border-block-start-clip & border-block-end-clip 및 border-inline-start-clip & border-inline-end-clip를 설정합니다.

border-clip은 롱핸드 속성을 위한 축약 속성으로, 네 변 모두에 동일한 값을 설정합니다.

나열된 부분들의 합이 테두리보다 짧으면, 남은 테두리는 지정된 유연 길이들 사이에서 비례적으로 분배됩니다. 유연 길이가 없으면, 리스트 끝에 1fr가 지정된 것처럼 동작합니다.

나열된 부분들의 합이 테두리보다 길면, 지정된 부분들은 테두리 끝까지 전부 표시되며 이 경우 모든 유연 길이는 0이 됩니다.

수평 테두리의 경우 부분들은 왼쪽에서 오른쪽 순으로 나열됩니다. 수직 테두리의 경우 위에서 아래 순으로 나열됩니다.

정확한 테두리 부분들은 모든 유연 길이를 처음에 0으로 놓고 지정된 테두리 부분을 레이아웃하여 결정됩니다. 남은 테두리는 지정된 유연 길이들 사이에서 비례적으로 분배됩니다.

border-clip: 10px 1fr 10px;

border-top-clip: 10px 1fr 10px;
border-bottom-clip: 10px 1fr 10px;
border-right-clip: 5px 1fr 5px;
border-left-clip: 5px 1fr 5px;

border-top-clip: 0 10px 1fr 10px;
border-bottom-clip: 0 10px 1fr 10px;
border-right-clip: 0 5px 1fr 5px;
border-left-clip: 0 5px 1fr 5px;

border: thin solid black;
border-clip: 0 1fr; /* hide borders */
border-top-clip: 10px 1fr 10px; /* make certain borders visible */
border-bottom-clip: 10px 1fr 10px;

border-top: thin solid black;
border-bottom: thin solid black;
border-top-clip: 10px;
border-bottom-clip: 10px;

border-top: thin solid black;
border-clip: 10px;

A sentence consists of words¹.

¹ Most often.

@footnote {
  border-top: thin solid black;
  border-clip: 4em;
}

border: 4px solid black;
border-top-clip: 40px 20px 0 1fr 20px 20px 0 1fr 40px;

border: 4px solid black;
border-top-clip: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;

6. 그림자 효과

6.1. 그림자 색상 지정: box-shadow-color 속성

box-shadow-color 속성은 하나 이상의 그림자 색상을 정의합니다. 이 속성은 쉼표(,)로 구분된 그림자 색상 목록을 허용합니다.

“레이어, 레이아웃 및 기타 상세” 섹션을 참고하면, box-shadow-color가 쉼표로 구분된 다른 그림자 관련 속성과 어떻게 결합되어 각 그림자 레이어를 구성하는지 알 수 있습니다.

6.2. 그림자 위치 이동: box-shadow-offset 속성

box-shadow-offset 속성은 하나 이상의 그림자 오프셋을 정의합니다. 이 속성은 쉼표(,)로 구분된 리스트를 허용합니다. 각 항목은 none(그림자 없음), 가로/세로 <length> 한 쌍, 혹은 한 개의 <length> 값(가로·세로 모두 그 값) 지정이 가능합니다.

none

그림자를 렌더링하지 않음. 이 그림자에 대응되는 다른 속성 값은 영향 없음.

첫 번째 <length>

그림자의 수평 오프셋 지정. 양수면 box 오른쪽, 음수면 왼쪽.

한 개만 지정하면 수평·수직에 모두 적용.

두 번째 <length>

그림자의 수직 오프셋 지정. 양수면 아래쪽, 음수면 위쪽 이동.

“레이어, 레이아웃 및 기타 상세” 섹션을 참고하면, box-shadow-offset 이 쉼표로 구분된 다른 그림자 속성과 어떻게 결합되는지 알 수 있습니다.

6.3. 그림자 흐림 효과: box-shadow-blur 속성

box-shadow-blur 속성은 그림자 효과의 흐림 반경을 하나 이상 정의합니다. 이 속성은 쉼표(,)로 구분된 <length> 리스트를 허용합니다.

음수 값은 유효하지 않습니다. blur 값이 0이면 그림자 경계가 날카롭습니다. 값이 커질수록 그림자 경계가 더 부드러워집니다. 아래 Shadow Blurring 참조.

“레이어, 레이아웃 및 기타 상세” 섹션을 참고하면, box-shadow-blur가 쉼표로 구분된 다른 그림자 속성과 어떻게 결합되는지 알 수 있습니다.

6.4. 그림자 확장: box-shadow-spread 속성

box-shadow-spread 속성은 그림자 확장 값을 하나 이상 정의합니다. 이 속성은 쉼표(,)로 구분된 <length> 리스트를 허용합니다.

양수 값은 그림자가 모든 방향으로 확장되게 하고, 음수 값은 그림자를 축소시킵니다. 아래 Shadow Shape 참조.

내부 그림자(inner shadow)의 경우, 그림자 영역이 넓어질수록 그림자 외곽선은 실제로 축소된다는 점에 유의하세요.

“레이어, 레이아웃 및 기타 상세” 섹션을 참고하면, box-shadow-spread가 쉼표로 구분된 다른 그림자 속성과 어떻게 결합되는지 알 수 있습니다.

6.5. 그림자 위치 결정: box-shadow-position 속성

box-shadow-position 속성은 하나 이상의 그림자 위치를 정의합니다. 쉼표(,)로 구분된 outset 및 inset 키워드 목록을 허용합니다.

outset

그림자를 외부 box-shadow로 만듭니다. 즉, 박스가 캔버스에서 위로 들려진 것처럼 박스의 바깥쪽에 그림자가 드리워집니다.

inset

그림자를 내부 box-shadow로 만듭니다. 즉, 박스가 캔버스에서 잘려 나가 뒤에 놓인 것처럼 캔버스가 박스 안쪽으로 그림자를 투영합니다.

“레이어, 레이아웃 및 기타 상세” 섹션을 참고하면, box-shadow-position 이 쉼표로 구분된 다른 그림자 속성과 어떻게 결합되어 각 그림자 레이어를 구성하는지 알 수 있습니다.

6.6. 드롭 섀도우 축약: box-shadow 속성

box-shadow 속성은 박스에 하나 이상의 드롭 섀도우를 부착합니다. 이 속성은 쉼표로 구분된 그림자 목록을 허용하며, 앞에서 뒤 순서로 적용됩니다.

각 그림자는 <spread-shadow> 형태로 지정되며, 두 개의 <length> 값으로 정의된 box-shadow-offset을 개괄하고, 선택적으로 box-shadow-blur, box-shadow-spread, box-shadow-color, 및 box-shadow-position 값을 가질 수 있습니다. 생략된 길이 값은 0이며; 생략된 색상은 지정된 오프셋이 transparent일 때는 transparent로, 그렇지 않을 경우 currentcolor로 기본값이 됩니다.

참고: 서로 다른 <length> 값들을 파싱할 때의 애매성을 피하기 위해, 오프셋은 box-shadow-offset 속성과는 달리 두 개의 <length> 값으로 반드시 지정해야 합니다.

<spread-shadow> = <'box-shadow-color'>? && [ [ none | <length>{2} ] [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?

아래 예시는 그림자에 대한 spread와 blur의 효과를 보여줍니다:

width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

6.6.1. 그림자 모양, 확장 및 녹아웃

외부 box-shadow는 요소의 border-box가 불투명한 것처럼 그림자를 드리웁니다. spread 거리가 0이라고 가정하면, 그 둘레는 border box와 정확히 같은 크기와 모양을 가집니다. 그림자는 border edge 바깥쪽에만 그려지며: 요소의 border-box 내부에서는 잘립니다.

내부 box-shadow는 padding edge 밖의 모든 것이 불투명한 것처럼 그림자를 드리웁니다. spread 거리가 0이라고 가정하면, 그 둘레는 padding box와 정확히 같은 크기와 모양을 가집니다. 그림자는 padding edge 내부에만 그려지며: 요소의 padding box 바깥쪽에서는 잘립니다.

만약 spread distance가 정의되어 있다면, 위에서 정의한 그림자 둘레는 spread distance만큼 바깥쪽으로 확장(외부 box-shadow의 경우)되거나 안쪽으로 수축(내부 box-shadow의 경우)되며, 이는 그림자의 직선 부분을 spread distance만큼 outsetting(내부 그림자의 경우 insetting)하여 (결과 너비/높이가 0 미만이면 0으로 내림 처리) 이루어집니다.

아래는 파란 테두리를 가진 주황색 박스에 드롭 섀도우를 적용한 몇 가지 예입니다.

border:5px solid blue; background-color:orange; width: 144px; height: 144px;	border-radius: 20px;	border-radius: 0;
box-shadow: rgba(0,0,0,0.4) 10px 10px;
box-shadow: rgba(0,0,0,0.4) 10px 10px inset
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset

spread가 적용될 때 박스의 모양을 보존하기 위해, 그림자의 코너 반경도 border-box(padding-box)의 반경에 spread distance를 더하거나(내부 그림자의 경우 빼서) 증가(감소)시키며(음수가 되면 0으로 처리) 모서리의 모양을 유지합니다. 외부 그림자의 경우에는 border radius가 각 차원에서 조정되어 둥근 모서리의 날카로움을 보전합니다.

border-image는 box-shadow의 모양에 영향을 미치지 않습니다.

6.6.2. 그림자 가장자리 흐리게 처리

0이 아닌 blur radius는 결과 그림자가 가우시안 필터 같은 방식으로 흐려져야 함을 나타냅니다. 정확한 알고리즘은 명시되지 않았으나; 결과 그림자는 blur radius의 절반에 해당하는 표준편차를 가지는 가우시안 블러를 적용했을 때 생성될 이미지와 근사해야 하며(각 픽셀은 기대값의 5% 이내여야 함)야 합니다.

참고: 즉, 긴 직선 그림자 가장자리의 경우, blur radius는 그림자 가장자리에 수직으로 중심을 두고 약 2배 길이의 색상 전환 지대를 만들며, 그림자 내부 쪽 끝점에서는 거의 전체 그림자 색에 가깝게, 외부 쪽 끝점에서는 거의 완전히 투명에 가깝게 변화합니다.

6.7. 레이어링, 레이아웃 및 기타 상세

드롭 섀도우는 coordinated value list 형태로 선언되며, 이는 box-shadow-* 속성들로 구성됩니다. 이들 속성은 box-shadow-offset을 coordinating list base property로 하는 coordinating list property group을 형성합니다. 자세한 내용은 CSS Values 4 § A Coordinating List-Valued Properties를 참조하세요.

그림자 효과는 앞에서 뒤로 적용됩니다: 첫 번째 그림자가 맨 위에 그려지고 나머지는 뒤에 레이어됩니다. 그림자는 레이아웃에 영향을 주지 않으며 다른 박스나 텍스트(또는 그들의 그림자)에 겹치거나 겹쳐질 수 있습니다. 스태킹 컨텍스트와 페인팅 순서 관점에서, 요소의 외부 box-shadow는 그 요소의 배경 바로 아래에 그려지며, 내부 그림자는 그 요소의 배경 바로 위에 그려집니다(존재할 경우 테두리 및 border image 아래).

특별히 명시되지 않는 한, 드롭 섀도우는 principal box에만 적용됩니다. 대상 박스가 여러 단편을 가진 경우, 그림자는 box-decoration-break에 명시된 대로 적용됩니다.

그림자는 스크롤을 유발하거나 스크롤 가능한 영역의 크기를 증가시키지 않습니다.

외부 그림자는 collapsing border 모델의 내부 테이블 요소에는 영향을 미치지 않습니다. 만약 collapsing border 모델에서 단일 테두리 변에 대해 그림자가 정의되어 있고 그 변이 여러 테두리 두께를 가진다면(예: 한 행이 다른 행보다 두꺼운 테두리를 가질 때 테이블의 외부 그림자, 또는 서로 다른 두께의 셀에 인접한 rowspan 셀에 대한 내부 그림자), 그 그림자의 정확한 위치와 렌더링은 정의되어 있지 않습니다.

7. 테두리 모양 지정

corner-shape 및 border-radius는 테두리 스타일에 어느 정도 표현력을 제공하지만, 여전히 테두리가 직사각형이라는 가정 위에서 동작합니다.

border-shape 함수는 이러한 기능을 확장하여, 작성자가 임의의 basic shape을 사용해 테두리 경로를 지정할 수 있게 합니다.

7.1. border-shape 속성

border-shape 속성은 단일 <basic-shape> 또는 두 개의 <basic-shape>을 받아, 각각 하나 또는 두 개의 경로를 생성합니다.

두 개의 <basic-shape> 값이 주어지면, 테두리는 두 경로 사이의 형태로 렌더링됩니다. 단일 <basic-shape>만 주어지면, 테두리는 관련 측면(relevant side)의 계산된 border width를 획 너비로 사용하는 스트로크로 렌더링됩니다.

테두리의 채움 색상은 관련 측면의 계산된 border-color입니다.

<geometry-box>가 주어지지 않으면, 백분율의 기본 계산은 주어진 <basic-shape> 값의 수에 따라 달라집니다.

두 개의 <basic-shape> 값이 주어지면, 첫 번째(외부)는 기본값으로 border box에 대응하고 두 번째(내부)는 기본값으로 padding box에 대응합니다. 이는 서로 다른 border-width 속성들이 최종 모양에 영향을 주도록 허용합니다.

단일 <basic-shape> 값이 주어지면, <geometry-box>의 기본값은 half-border-box가 되어, 기본 테두리 동작과 일치하는 방식으로 스트로크를 허용합니다.

border-shape 속성은 border-radius 및 corner-shape과 호환되지 않습니다. 요소의 계산된 값에서 border-shape가 none이 아니면, 그 요소의 border-radius는 무시되어 0으로 설정된 것처럼 처리됩니다. corner-shape는 암시적으로 무시되는데, 이는 corner-shape가 border-radius와 함께만 동작할 수 있기 때문입니다.

외부 box-shadow는 외부 경로의 바깥쪽을 따르며, 내부 box-shadow는 내부 경로의 안쪽을 따릅니다. 둘 다 스트로크로 렌더링되며, 스트로크 너비는 spread * 2이고 border shape에 의해 잘립니다.

border-shape은 지오메트리나 레이아웃에 영향을 주지 않으며, 레이아웃은 여전히 기존의 border-width 속성들로 계산됩니다.

border-shape은 박스 내부의 컨텐츠 흐름에도 영향을 주지 않습니다. 참고: 작성자는 border-shape을 shape-inside과 함께 사용하여 박스를 장식하면서 동시에 텍스트 흐름을 제어하는 효과를 만들 수 있습니다.

내부 border-shape는 overflow 컨텐츠를 border-radius와 동일한 방식으로 클리핑합니다(자세한 내용은 corner clipping 참조).

교체된 요소의 클리핑에 이것이 어떻게 영향을 주어야 할까요?

개인정보 고려사항

이 명세에 대해 보고된 새로운 개인정보 관련 고려사항은 없습니다.

보안 고려사항

이 명세에 대해 보고된 새로운 보안 관련 고려사항은 없습니다.

변경 사항

2025년 7월 22일자 첫 공개 작업 초안 이후 변경 사항

• corner-* 축약을 추가함

• corners를 corner으로 이름 변경함

• Web Platform Tests 커버리지 추가

• [CSS3BG]의 테두리 및 그림자 관련 전체 텍스트를 통합함

• border-clip-* 속성명을 border-*-clip으로 변경하고 논리적 롱핸드 및 축약을 추가함

• border-*-clip 속성의 normal 값을 none으로 이름 변경함

• border-*-*-radius 롱핸드에 대해 수평/수직 반경을 구분하는 새 문법(슬래시 사용)을 추가함

• <length> 하나로 box-shadow-offset의 두 오프셋을 동일하게 설정할 수 있게 허용함

[CSS3BG] 이후 추가된 사항

• <image-1D>를 border-color 및 그 롱핸드의 값으로 추가함

• 물리적 및 논리적 border-*-radius 축약 추가

• corner-shape 및 corner-*-shape 축약 추가, 관련된 corner 및 corner-* 축약 추가

• border-shape 추가

• 부분 테두리를 border-limit 및 border-*-clip 속성으로 추가함

• box-shadow-* 롱핸드를 추가하고 box-shadow를 축약으로 변경함

• 논리적 테두리 속성들을 [CSS-LOGICAL-1]에서 이 사양으로 이동함

감사의 글

[CSS1], [CSS2], 및 [CSS3BG]의 많은 기여자들 외에도, 편집자들은 이 Level 4에 대해 특별히 제안과 피드백을 준 Tab Atkins, Noam Rosenthal, Håkon Wium Lie, Oriol Brufau, 및 Guillaume Lebas 에게 감사드립니다.