<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
div {
background:yellow;
padding:20px;
border:5px dotted red;
margin:30px;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div>
<img src="mio.png" alt="고양이 눈">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border:3px solid blue">3픽셀 solid</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>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>둥근 모서리 테두리</title>
<style>
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>
<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>
</body>
</html>
