박스 모델
DIVDIVDIV
다양한 테두리
3픽셀 soild
3픽셀 none
3픽셀 hidden
3픽셀 dotted
3픽셀 dashed
3픽셀 double
15픽셀 groove
15픽셀 ridge
15픽셀 inset
15픽셀 outset
둥근 테두리
반지름 50픽셀의 둥근 모서리
반지름 0, 20, 40, 60 둥근 모서리
반지름 0, 20, 40, 20 둥근 모서리
반지름 0, 20, 0, 20 둥근 모서리
반지름 50의 둥근 점선 모서리
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>박스 모델</title>
<style>
body {
background: ghostwhite;
}
Span {
background: deepskyblue;
}
div.box {
background: yellow;
border-style: solid;
border-color: peru;
margin: 40px;
border-width: 30px;
padding: 20px;
}
p {
background: #90D000;
width: 300px;
padding: 20px;
}
#round1 {
border-radius: 50px;
}
#round2 {
border-radius: 0px 20px 40px 60px;
}
#round3 {
border-radius: 0px 20px 40px;
}
#round4 {
border-radius: 0px 20px;
}
#round5 {
border-radius: 50px;
border-style: dotted;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<div class="box">
<span>DIVDIVDIV</span>
</div>
<hr>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 soild</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
<hr>
<h3>둥근 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
<p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
<p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
<p id="round5">반지름 50의 둥근 점선 모서리</p>
<hr>
</body>
</html>
]]>