728x90
반응형
05_radius.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/05_radius.css";
</style>
</head>
<body>
<div class="brd1"></div>
<div class="brd2"></div>
<div class="brd3"></div>
<div class="brd4"></div>
</body>
</html>
05_radius.css
@CHARSET "UTF-8";
div{
float:left;
width:200px;
height:100px;
margin:20px;
background:lightgreen;
border:1px solid black;
}
.brd1{
border-top-left-radius:100px 50px;
}
.brd2{
border-bottom-right-radius:50% 30%;
}
.brd3{
border-top-right-radius:50px;
}
.brd4{
border-radius:50px;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-07. block (0) | 2017.08.24 |
|---|---|
| [CSS] ch04-06. boxshadow (0) | 2017.08.24 |
| [CSS] ch04-04. border (0) | 2017.08.24 |
| [CSS] ch04-03. border (0) | 2017.08.23 |
| [CSS] ch04-02. margin (0) | 2017.08.23 |