Border
개요 : 이 속성은 요소의 테두리(border)에 크기, 색상, 스타일을 동일하게 지정하는 단축 속성이다.
border-top , border-right, border-bottom , border-left 속성을 이용하면, 각 방향의 테두리에 크기나 색상 및 스타일을
다르게 지정할 수 있다.
어떤 값도 필수적이지는 않지만, border-style 값을 생략하면 , border-style 기본값이 none 이므로 아무런 테두리도 적용되지
않는다.
정의
border |
설명 |
값 |
[ <border-width> || <border-style> || <color> ] | inherit |
기본값 |
개별 속성의 기본값 참조 |
적용대상 |
모든 요소 |
상속 |
안됨 |
백분율 |
사용 불가 |
미디어 |
visual |
값
값 |
설명 |
border-width |
크기를 지정한다. |
border-style |
스타일을 지정한다. |
색상 |
색상을 지정한다. |
inherit |
부모 요소의 값을 상속하도록 지정한다. |
View Source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
.box { border:1px solid #FF0000; width:200px; height:100px;}
</style>
<body>
<div class="box">빨간테두리 1픽셀이고 가로 200픽셀에 세로100픽셀입니다</div>
</body>
Result :
''.' Programs > CSS' 카테고리의 다른 글
Border-Bottom (0) | 2012.03.20 |
---|---|
Border - Left (0) | 2012.03.20 |
list-style-type (0) | 2012.03.20 |
List - Style - Image (0) | 2012.03.20 |
List - Style - Position (0) | 2012.03.20 |