CSS3 border module example

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

border-color

required border-style, inherited from font color by default

border-color

p {
	border-color: #0c0;
}

border-top-color

p {
	border-top-color: #0c0;
}

border-right-color

p {
	border-right-color: #0c0;
}

border-bottom-color

p {
	border-bottom-color: #0c0;
}

border-left-color

p {
	border-left-color: #0c0;
}

border-style

none

p {
	border-style: none;
}

hidden

p {
	border-style: hidden;
}

dotted

p {
	border-style: dotted;
}

dashed

p {
	border-style: dashed;
}

solid

p {
	border-style: solid;
}

double

p {
	border-style: double;
}

groove

p {
	border-style: groove;
}

ridge

p {
	border-style: ridge;
}

inset

p {
	border-style: inset;
}

outset

p {
	border-style: outset;
}

border-width

thin

p {
	border-width: thin;
}

medium

p {
	border-width: medium;
}

thick

p {
	border-width: thick;
}

border-top-width

p {
	border-top-width: thick;
}

border-right-width

p {
	border-right-width: thick;
}

border-bottom-width

p {
	border-bottom-width: thick;
}

border-left-width

p {
	border-left-width: thick;
}

border-radius

border-radius

p {
	border-radius: 1em;
}

border-top-right-radius

p {
	border-top-right-radius: 1em;
}

border-bottom-right-radius

p {
	border-bottom-right-radius: 1em;
}

border-bottom-left-radius

p {
	border-bottom-left-radius: 1em;
}

border-top-left-radius

p {
	border-top-left-radius: 1em;
}

1em 3em (top, right)

p {
	border-top-right-radius: 1em 3em;
}

3em 1em (top, right)

p {
	border-top-right-radius: 3em 1em;
}

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

p {
	border-radius: 1em 3em;
}

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

p {
	border-radius: 1em 3em 2em;
}

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

p {
	border-radius: 1em 3em 2em 1em;
}

1em[1] / 3em[2]

p {
	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]

p {
	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]

p {
	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]

p {
	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

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

border-image (vendor prefix)

p {
	-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;
}

div {
	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;
}