티스토리 뷰

[개발]프로그래밍/css3

[css3] border-color - 테두리 색상 지정

좋은 블로그 2021. 4. 27. 09:12
1. 개념
border-color - 테두리 색상 지정
border-color는 테두리 색상을 지정하는 속성
border-top-color, border-right-color, border-left-color,border-bottom-color 등과 같이 각각으로 색상을 지정할 수 있음
또한 border-color로 전체 테두리 색상을 한번에 지정할 수도 있음
2. 태그
border-color
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
div
{
margin-top : 20px ;
width : 100px ;
height : 100px ;
display : inline-block ;
border-width : 2px ;
border-style : solid ;
}
</style>
<body>
1
<div style =' border-top-color : red ' ></div>
2
<div style =' border-bottom-color : red ' ></div>
3
<div style =' border-left-color : red ' ></div>
4
<div style =' border-right-color : red ' ></div>
5
<div style =' border-color : red ' ></div>
</body>
</html>
결과 화면
border-color 사용 예제
코드 설명
1
border-top-color : red ;
border-top-color는 테두리 위에 있는 색상을 지정합니다..
2
border-bottom-color : red ;
border-bottom-color는 테두리 아래에 있는 색상을 지정합니다.
3
border-left-color : red ;
border-left-color는 테두리서 왼쪽에 있는 색상을 지정합니다.
4
border-right-color : red ;
border-right-color는 테두리 오른쪽에 있는 색상을 지정합니다.
5
border-color : red ;
border-color 는 테두리 전체에 해당하는 색상을 지정합니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] border-radius - 모서리 둥글게 만드는 속성  (0) 2021.04.29
[css3] border - 테두리 스타일 묶어 지정  (0) 2021.04.28
[css3] border-width - 테두리 두께 지정  (0) 2021.04.26
[css3] border-style - 테두리 스타일 지정  (0) 2021.04.23
[css3] display - 화면 배치 방법 결정  (0) 2021.04.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday