CSS 속성중 테두리를 둥글게 하거나 색상, 모양을 설정하는 border 속성에 대하여 알아봅니다.
border
축약 속성으로, border-width, border-style, border-color 순서로 작성한다. 몇몇 값을 생략해도 상관없다.
p {border: 5px solid red;}
속성값
- border-width : border의 width 값을 지정
- border-style : border의 style 값을 지정
- border-color : border의 color 값을 지정
- inherit : 부모 요소로부터 값을 상속 받는다.
자바스크립트 문법
object.style.border="3px solid blue"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
border-top, border-right, border-bottom, border-left
축약 속성.
p {border-top: thick solid #ff0000;}
p {border-right: thick dashed #ff0000;}
p {border-bottom: thick dotted #ff0000;}
p {border-left: thick double #ff0000;}
속성값
- border-[top | right | bottom | left]-width : border의 width 값을 지정
- border-[top | right | bottom | left]-style : border의 style 값을 지정
- border-[top | right | bottom | left]-color : border의 color 값을 지정
- inherit : 부모 요소로부터 값을 상속 받는다.
자바스크립트 문법
object.style.borderTop="3px solid blue"
object.style.borderRight="3px solid blue"
object.style.borderBottom="3px solid blue"
object.style.borderLeft="3px solid blue"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
border-color
4방향의 테두리에 적용될 색상을 지정한다. top, right, bottom, left 순서로 작성한다.
h1, h2, h3, h4 {border-style: solid;}
h1 {border-color: red green blue pink;} /* top-red, right-green, bottom-blue, left-pink */
h2 {border-color: red green blue;} /* top-red, right & left-green, bottom-blue */
h3 {border-color: red green;} /* top & bottom-red, right & left-green */
h4 {border-color: red;} /* all four borders are red */
항상 border-color 속성을 지정하기 전에 border-style을 선언해야 한다. 요소는 반드시 색상을 바꾸기전에 borders가 존재해야 한다.
속성값
- css 컬러 값 : 색상 키워드, 16진수 값, rgb 값등의 css 컬러 속성 값을 지정한다.
- transparent : 투명을 지정한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
border-color 데모 보기
자바스크립트 문법
object.style.borderColor="#FF0000 blue"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
IE6 이하 버전들은 transparent 속성값을 지원하지 않는다. inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
border-style
4방향의 테두리에 적용될 선의 스타일을 지정한다.
h1 {border-style: dotted solid double dashed;} /* top-dotted, right-solid, bottom-double, left-dashed */
h2 {border-style: dotted solid double;} /* top-dotted, right & left-solid, bottom-double */
h3 {border-style: dotted solid;} /* top & bottom-dotted, right & left-solid */
h4 {border-style: dotted;} /* all four borders are dotted */
속성값
- none : border 스타일을 지정하지 않는다.
- hidden : none 속성값과 같다.
- dotted, dashed, solid, double, groove, ridge, inset, outset : 각각의 속성값들은 아래의 그림과 데모를 참고한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
border-style 데모 보기
자바스크립트 문법
object.style.borderStyle="dotted double"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값과 hidden 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
border-width
4방향의 테두리에 적용될 선의 두께를 지정한다. 숫자는 px, pt, em 단위가 될 수 있다.
h1, h2, h3, h4 {border-style: solid;}
h1 {border-width: thin medium thick 10px;} /* top-thin, right-medium, bottom-thick, left-10px */
h2 {border-width: thin medium thick;} /* top-thin, right & left-medium, bottom-thick */
h3 {border-width: thin medium;} /* top & bottom-thin, right & left-medium */
h4 {border-width: thin;} /* all four borders are thin */
항상 border-width 속성을 사용하기 전에 border-style 속성을 선언해야 한다.
속성값
- thin, medium, thick : 이 속성값들은 아래의 예제 링크를 참고하자.
- length : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
border-width 데모 보기
자바스크립트 문법
object.style.borderWidth="thin thick"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값과 hidden 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
border-radius
CSS3에 추가된 속성으로 축약 속성이며 4방향의 모서리에 지정될 반지름을 지정한다.
h1 {border-radius: 25px;}
h2 {
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}
h3 {border-radius: 2em 1em 4em / 0.5em 3em;}
h4 {
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;
}
- top-left, top-right, bottom-right. bottom-left 순서로 값이 지정한다.
- div 태그의 모서리를 둥글게 하고 배경 이미지를 지정하면 모서리가 둥근 이미지도 만들어 낼 수 있다. 선택적으로 투명한 gif 파일도 포함할 수 있다.
속성값
- px, pt, em, % : 반지름의 길이를 지정한다.
border-radius 데모 보기
자바스크립트 문법
object.style.borderRadius="5px"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE9+ | FF4 | SF5, iOS3 | CH10, An2 | O10.6 |
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
각 모서리에 개별적으로 반지름을 지정한다.
h1 {
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}
h2 {
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;
}
속성값
- px, pt, em, % : 반지름의 길이를 지정한다.
자바스크립트 문법
object.style.borderBottomLeftRadius="5px"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE9+ | 지원 | 지원 | 지원 | 지원 |
border-collapse
표의 칸 종류를 조정한다.
table {border-collapse: collapse;}
속성값
- collapse : 테두리가 축소(합쳐)된다.
- separate : 테두리가 분리된다.
- inherit : 부모 요소로부터 값을 상속 받는다.
자바스크립트 문법
object.style.borderCollapse="collapse"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
border-collapse 속성의 inherit 속성값은 IE9 이하 버전에서는 지원하지 않는다. !DOCTYPE이 지정되지 않았다면 border-collapse는 기대하지 않은 결과를 초래한다.
border-image
CSS3에 추가된 속성이고 축약 속성이며 border-style 속성에 지정된 스타일을 덮어쓸 이미지를 지정하고 추가적인 배경 레이어를 생성한다.
div {
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
- border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat 의 축약속성이다. 생략된 값은 기본값으로 설정된다.
속성값
속성값들의 자세한 설명은 아래에 따로 다룬다.
- border-image-source : 테두리로 사용할 이미지를 지정한다.
- border-image-slice : 테두리로 사용될 이미지의 위치를 지정한다.
- border-image-width : 테두리로 사용될 이미지의 너비를 지정한다.
- border-image-outset : border box를 넘어서 확장되는 테두리 이미지 영역의 양을 지정한다.
- border-image-repeat : 테두리 이미지의 스케일을 조정하는 방법을 지정한다.
border-image 데모 보기
자바스크립트 문법
object.style.borderImage="url(border.png) 30 30 round"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE11+ | FF4 | SF3, iOS3 | CH9, An2 | O11 |
오페라는 -o-border-image 속성을 대안으로 제공한다. 사파리 5는 -webkit-border-image 속성을 대안으로 제공하여 사파리 6부터 정식지원한다.
border-image-slice
CSS3에 추가된 속성으로 보더 이미지를 9등분 하도록 각 변으로부터의 offset 거리를 지정한다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서의 offset 거리부터 시계방향으로 지정된다. 기본값은 100%이다.
div {
border: 30px solid transparent;
border-image-source: url(border.png);
border-image-slice: 30;
}
- 4개의 값은 각각 위, 오른쪽, 아래 및 왼쪽 가장자리의 여백을 의미하며 이로 인해 이미지는 4개의 모서리와 4개의 가장자리 및 가운데 영역등 총 9가지 영역으로 구분된다.
- 가운데 이미지 영역은 fill 키워드를 지정하지 않는 한(투명처리) 무시된다.
속성값
- number(숫자) : 래스터(raster) 이미지의 경우 픽셀 거리를 지정하고, 벡터(vector) 이미지인 경우에는 좌표를 지정한다.
- %(퍼센트) : 이미지의 크기에 대한 상대적인 크기를 지정한다.
- fill : 선택적으로 적용가능한 fill 키워드는 테두리 이미지의 가운데 영역을 위한 예약어이다.
자바스크립트 문법
object.style.borderImageSlice="50% 10%"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE11+ | 지원 | SF6+ | 지원 | 미지원 |
border-image-source
CSS3에 추가된 속성으로 추가로 배경 이미지 레이어를 만들어 border-style 속성을 덮어쓸 이미지를 정의한다.
div {border-image-source: url(border.png);}
속성값
- none : 이미지를 사용하지 않는다.
- url(이미지경로) : 이미지 경로를 지정한다.
자바스크립트 문법
object.style.borderImageSource="url(border.png)"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE11+ | 지원 | SF6+ | 지원 | 미지원 |
border-image-width
CSS3에 추가된 속성으로 테두리 이미지의 width 값을 지정한다.
div {
border-image-source: url(border.png);
border-image-width: 10px;
}
속성값
- length(길이) : 테두리 이미지 영역의 크기를 px로 지정한다.
- number(숫자) : 기본값은 1이고 border-width 속성값에 대한 배수이다.
- %(퍼센트) : 테두리 이미지 영역의 수평 offset의 너비와 수직 offset의 높이로 사용된다.
- auto : 테두리 이미지의 너비는 해당 이미지 슬라이스의 원래 너비 또는 높이가 된다.
border-image-width 데모 보기
자바스크립트 문법
object.style.borderImageWidth="20px 30px"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE11+ | 지원 | SF6+ | 지원 | 미지원 |
border-image-outset
CSS3에 추가된 속성으로 border box를 넘어서 확장되는 테두리 이미지 영역의 양을 지정한다.
div {
border-image-source: url(border.png);
border-image-outset: 5px;
}
속성값
- length(길이) : 기본 값은 0이며, 테두리 박스 뒤쪽의 테두리 이미지에 대한 위, 오른쪽, 아래, 왼쪽 값을 지정한다.
- number(숫자) : 해당 border-width 속성 값의 배수이다.
border-image-outset 데모 보기
자바스크립트 문법
object.style.borderImageOutset="5px 10px 20px 15px"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE11+ | 지원 | SF6+ | 지원 | 미지원 |
border-image-repeat
CSS3에 추가된 속성으로 테두리 이미지의 스케일을 조정하는 방법을 지정한다.
div {
border-image-source: url(border.png);
border-image-repeat: stretch;
}
속성값
- stretch : 기본값으로 영역을 채우기 위해 이미지가 늘어난다.
- repeat : 영역을 채우기 위해 이미지를 반복해서 노출한다.
- round : 타일 형태로 영역을 채운다. 만일 영역이 올바르게 채워지지 않으면 이미지의 크기를 재조정한다.
- space : 타일 형태로 영역을 채운다. 만일 영역이 올바르게 채워지지 않으면 이미지 사이의 공간을 조정한다.
border-image-repeat 데모 보기
자바스크립트 문법
object.style.borderImageRepeat="round"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE11+ | 지원 | SF6+ | 지원 | 미지원 |
border-spacing
테두리와 셀사이의 거리를 지정한다.
table {
border-collapse: separate;
border-spacing: 10px 50px;
}
속성값
- length length : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. 첫 번째 값은 수평, 두 번째 수직값이며 만일 하나의 길이가 지정되지 않는다면 수평, 수직 둘다 하나의 값으로 적용된다.
- inherit : 부모 요소로부터 값을 상속 받는다.
자바스크립트 문법
object.style.borderSpacing="15px"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
IE8은 !DOCTYPE이 지정되어 있어야만 border-spacing 속성을 지원한다.
'웹코딩 > CSS' 카테고리의 다른 글
| CSS 박스속성(Box Property) (0) | 2015.06.02 |
|---|---|
| CSS 외곽선속성(Outline Property) (0) | 2015.06.02 |
| CSS 배경속성(Background Property) (0) | 2015.06.01 |
| CSS 선택자(Selector) 및 지원 여부 (0) | 2015.06.01 |
| CSS 기초(정의, 링크, 문법, 우선순위) (2) | 2015.06.01 |
