[CSS] border

border

border-width, border-style, border-color, border-image의 단축 속성이다.

[ <border-width> || <border-style> || [<color> | transparent] || <uri>]| inherit

border-color

border-top-color, border-right-color, border-bottom-color, border-left-color의 단축 속성이다.

border-style

border-top-style, border-right-style, border-bottom-style, border-left-style의 단축 속성이다.

1. 값

none

보더가 없다. 즉, width가 0인 보더. border-color와 border-width가 무시된다.

hidden

보더를 숨긴다.

border:none과 border:hidden의 차이 : 테이블에서 border 충돌문제 해결의 차이

dotted

dashed

dash나 dot 간의 간격이나 길이를 조절하는 것은 불가

solid

double

groove

ridge

inset

outset

border-radius

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius의 단축 속성

<length> <length>?

값

1. 곡률

타원형 곡률을 적용할 수 있다.

x축길이/y축길이

2. 갯수

1. 1개인 경우

값이 4개 코너 모두에 적용됨

2. 2개인 경우

첫번째 값은 왼쪽 위, 오른쪽 아래 코너에, 두번째 값은 오른쪽 위, 왼쪽 아래 코너에 적용됨

3. 3개인 경우

첫번째 값은 왼쪽 위, 두번째 값은 오른쪽 위와 왼쪽 아래, 세번째 값은 오른쪽 아래 코너에 적용됨

4. 4개인 경우

첫번째 값은 왼쪽 위, 두번째 값은 오른쪽 위, 세번째 값은 오른쪽 아래, 네번째 값은 왼쪽 아래 코너에 적용됨

혼합

color

style

border-image

border-image-source, `border-collapse : collapse인 테이블 내부요소를 제외한 모든 요소에 적용 가능하다.

border-image-source

border-style대신에 지정하여 보더를 이미지 형태로 렌더링할 수 있다.

none | <image>

border-image-slice

보더 이미지의 요소의 테두리로부터의 오프셋 위치를 지정한다.

[<number> | <percentage>]{1,4} && fill?

1. 값

음수는 지정할 수 없고, 계산값이 이미지 사이즈보다 큰 경우 100%로 해석된다.

<percentage>

수평 오프셋은 이미지 가로 크기에, 수직 오프셋은 세로 크기에 상대적이다.

<number>

픽셀이나 벡터로 지정할 수 있다.

ex) 25% 30% 12% 20%의 경우

fill

보더 이미지가 꽉 채워져 보존된다.

border-image-width

보더 이미지 영역의 크기를 결정한다. (보더 이미지 영역은 보더 박스 영역과 일치한다.)
값은 top, right, bottom, left 모서리로부터의 거리를 나타낸다.
초기값은 1

[ <length> | <percentage> | <number> | auto ]{1,4}

값

<percentage>

수평 값은 width에, 수직 값은 height에 상대적이다.

<number>

border-width 값과 곱하여 나타냄

border-width:10px; border-image-width:1.5; -> 보더 이미지 영역은 15px

auto

border-image-outset

border-image-repeat

​