<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
/*
border : 테두리
1) border-style: solid(실선), double(이중실선), dotted(점선), dashed(대시선)
2) border-color
3) border-width: 테두리 두께, thin(얇은선), medium(중간선), thick(굵은선)
4) border-radius: 테두리 둥글게 다듬기
```
* 상하좌우 전체의 border style과 width를 동시에 적용
ex) border : 1px solid red
*/
div{
width: 500px;
height: 250px;
}
```
</style>
</head>
<body>
<div style="border-style: double">
이중실선 : border-style: double
</div>
<br/>
```
<div style="border-style: solid; border-width: 5px">
네 테두리 모두 5px : border-width: 5px
</div>
<br/>
<div style="border-style: solid; border-width: 5px 20px">
상하 테두리 5px, 좌우 테두리 20px : border-width: 5px 20px
</div>
<br/>
<div style="border-style: solid; border-width: 5px 20px 40px">
상 테두리 5px, 좌우 테두리 20px, 하 테두리 40px : border-width: 5px 20px 40px
</div>
<br/>
<div style="border-style: solid; border-width: 5px 20px 35px 50px">
상 테두리 5px, 우 테두리 20px, 하 테두리 35px 좌 테두리 50px: border-width: 5px 20px 35px 50px <br />
12시 방향부터 시계방향으로 적용된다.
</div>
<br/>
<div style="border-style: solid; border-width: 0 0 0 20px">
좌 테두리만 20px : border-width: 0 0 0 20px
</div>
<br />
<div style="background:tomato; border-radius: 5px ">
배경색 tomato, 모든 모서리 5px 곡률 조정 : <br/>
background:tomato; border-radius: 5px <br />
</div>
<br />
<div style="background:orange; border-radius: 5px 20px">
border-radius: 5px 20px
</div>
<br />
<div style="background:yellow; border-radius: 5px 20px 35px 50px">
border-radius: 5px 20px 35px 50px <br/>
</div>
<br />
<div style="background:yellowgreen; border-radius: 35px 35px 0 0">
border-radius: 35px 35px 0 0 <br/>
</div>
<br />
<div style="background:green; border-radius: 0 0 35px 35px">
border-radius: 0 0 35px 35px <br/>
11시 방향 모서리부터 시계방향으로 적용된다.
</div>
<br />
```
</body>
</html>
