Html&CSS/html5&css3
0226_html5/css3_border-radius
.Epona.
2020. 2. 26. 22:20
css3는 ie9부터 적용됨
css코드는 제이쿼리, 스크립트에서도 적용 가능
<style>
/* border-radius */
.radius div{width: 100px; height: 100px; margin-bottom: 15px; background-color: darkcyan}
.radius .box1{ border-radius: 50%}
.radius .box2{ border-radius: 10px 30px } /*10px: 상단 좌측, 하단 우측, 30px: 상단 우측, 하단 좌측*/
.radius .box3{ border-radius: 0px 50px 20px 30px}
.radius .box4{ border-radius: 10px; } /*전체 10px*/
</style>
</head>
<body>
<h3>[border-radius]</h3>
<div class="radius">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</div>
</body>