html & css/개념
Border 스타일링
by Doo Hee
2023. 11. 18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* border */
/* border-top, border-right, border-bottom, border-left */
/* border: 5px -> 4면 모두 5px */
/* border: 5px 10px -> top, bottom은 5px, right, left는 10px */
/* border 5px 10px 7px -> top은 5px, right, left는 10px, bottom은 7px */
/* border 5px 10px 7px 8px -> top, right, bottom, left 순으로 지정*/
div {
/* border: 3px solid red; */
border-width: 3px;
/* border-style: solid; */
border-color: red;
width: 50px;
height: 50px;
margin: 10px;
}
.dashed {
border-style: dashed;
}
.dotted {
border-style: dotted;
}
.solid {
border-style: solid;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
/* 테두리가 파인 것처럼 보인다. */
}
.ridge {
border-style: ridge;
/* 테두리가 튀어나온 것처럼 보인다. */
}
.inset {
border-style: inset;
/* 요소가 파인 것처럼 보인다. */
}
.outset {
border-style: outset;
/* 요소가 튀어나온 것처럼 보인다. */
}
/* 두께 */
.thin {
border-width: thin;
}
.medium {
border-width: medium;
}
.thick {
border-width: thick;
}
.radius {
border-radius: 10px;
/* 4개의 모서리에 대해서 둥근 모양을 만들 수 있게 해준다. */
}
/* border: border-width, border-style, border-color */
</style>
</head>
<body>
<div class="dashed"></div>
<div class="dotted"></div>
<div class="solid radius"></div>
<div class="double"></div>
<div class="groove"></div>
<div class="ridge"></div>
<div class="inset"></div>
<div class="outset"></div>
<div class="solid thin"></div>
<div class="solid medium"></div>
<div class="solid thick"></div>
</body>
</html>
