Front/CSS
[CSS3] border 속성
시월해
2021. 4. 22. 17:20
border 속성 : 요소의 테두리 선을 지정할 때 사용하는 속성.
- 형식) border: 두께 종류 색상;
- 개별적으로 사용하는 속성
* border-width : 테두리 선의 두께
* border-style : 테두리 선의 종류
* border-color : 테두리 선의 색상
- 사용법 - border-style(테두리 선의 종류)
none : 테두리 선 없음
hidden : 테두리 선 없음
solid : 실선, 단선(일반선)
dotted : 점선(. . . .)
dashed : 파선(-------)
double : 두줄선
groove : 홈이 파여 있는 선
ridge : 솟은 모양의 선(groove의 반대개념)
inset : 요소 전체가 들어간 선
outset : 요소 전체가 나온 선
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 500px;
height: 300px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.text {
background-color: yellow;
width: 40%;
height: 70px;
margin: 10% 0 0 10%;
border-style: dashed;
border-width: 0.3em;
border-color: red;
padding: 20px; /*글자와 테두리 사이의 여백*/
}
</style>
</head>
<body>
<div class="text" align="center">
*[5월] 주말 특강(무료교육) 안내<br>
*[웹퍼블리셔] 웹퍼블리셔 관련 무료 교육 : 2021/05/10(토)<br>
*[무료교육안내] 교육센터 :
</div>
</body>
</html>