CSS3 border module example

W3C CSS Backgrounds and Borders Module Level 3(working draft) 중에서 테두리에 관련된 속성들과 값에 대한 예제 코드입니다. 브라우저 지원 현황은 PPK의 Browser support chart를 확인해 보세요.

border-color

It requires border-style, inherited from font color by default.

border-color

border-color: #0c0;

border-top-color

border-top-color: #0c0;

border-right-color

border-right-color: #0c0;

border-bottom-color

border-bottom-color: #0c0;

border-left-color

border-left-color: #0c0;

border-style

none

border-style: none;

hidden

border-style: hidden;

dotted

border-style: dotted;

dashed

border-style: dashed;

solid

border-style: solid;

double

border-style: double;

groove

border-style: groove;

ridge

border-style: ridge;

inset

border-style: inset;

outset

border-style: outset;

border-width

thin

border-width: thin;

medium

border-width: medium;

thick

border-width: thick;

border-top-width

border-top-width: thick;

border-right-width

border-right-width: thick;

border-bottom-width

border-bottom-width: thick;

border-left-width

border-left-width: thick;

border-radius

border-radius

border-radius: 1em;

border-top-right-radius

border-top-right-radius: 1em;

border-bottom-right-radius

border-bottom-right-radius: 1em;

border-bottom-left-radius

border-bottom-left-radius: 1em;

border-top-left-radius

border-top-left-radius: 1em;

1em 3em (top, right)

border-top-right-radius: 1em 3em;

3em 1em (top, right)

border-top-right-radius: 3em 1em;

3em 1em (top-left & bottom-right, top-right & bottom-left)

border-radius: 1em 3em;

1em 3em 2em (top-left, top-right & bottom-right, bottom-left)

border-radius: 1em 3em 2em;

1em 3em 2em 1em (top-left, top-right, bottom-right, bottom-left)

border-radius: 1em 3em 2em 1em;

1em[1] / 3em[2]

border-radius: 1em / 3em;
/*
border-top-left-radius:     1em[1] 3em[2];
border-top-right-radius:    1em[1] 3em[2];
border-bottom-right-radius: 1em[1] 3em[2];
border-bottom-left-radius:  1em[1] 3em[2];
*/

1em[1] 3em[2] / 2em[3]

border-radius: 1em 3em / 2em;
/*
border-top-left-radius:     1em[1] 2em[3];
border-top-right-radius:    3em[2] 2em[3];
border-bottom-right-radius: 1em[1] 2em[3];
border-bottom-left-radius:  3em[2] 2em[3];
*/

1em[1] 3em[2] 2em[3] / 2em[4] 1em[5]

border-radius: 1em 3em 2em / 2em 1em;
/*
border-top-left-radius:     1em[1] 2em[4];
border-top-right-radius:    3em[2] 1em[5];
border-bottom-right-radius: 2em[3] 2em[4];
border-bottom-left-radius:  3em[2] 1em[5];
*/

1em[1] 2em[2] 1em[3] 3em[4] / 3em[5] 2em[6] 3em[7] 2em[8]

border-radius: 1em 2em 1em 3em / 3em 2em 3em 2em;
/*
border-top-left-radius:     1em[1] 3em[5];
border-top-right-radius:    2em[2] 2em[6];
border-bottom-right-radius: 1em[3] 3em[7];
border-bottom-left-radius:  3em[4] 2em[8];
*/

border-image

border-image: url(9box.png) 27 round stretch;

border-image (vendor prefix)

-o-border-image: url(9box.png) 27 round stretch;
-webkit-border-image: url(9box.png) 27 round stretch;
-moz-border-image: url(9box.png) 27 round stretch;
border-image: url(9box.png) 27 round stretch;

border-width: 79px 75px 79px 233px;
-o-border-image: url(border-image.png) 79 75 79 233 round;
-webkit-border-image: url(border-image.png) 79 75 79 233 round;
-moz-border-image: url(border-image.png) 79 75 79 233 round;
border-image: url(border-image.png) 79 75 79 233 round;