Chạy Thử Css border-radius từng góc

Chạy Thử Css border-radius từng góc

Chạy Thử Css border-radius từng góc

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử Css border-radius từng góc</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%; float:left; height:auto; background:red; margin-bottom:10px; padding:20px; color:#fff}
</style>
</head>
<body>

<h1>Chạy Thử Css border-radius từng góc</h1>

<p>Dùng để bo tròn các góc của một phần tử HTML, đơn vị thường dùng là px, %, em,...:</p>

<div style="border-radius: 10px;">border-radius: 10px; (Bo tròn 4 góc 10px)</div>

<div style="border-radius: 0px 5px 15px 30px;">border-radius: 0px 5px 15px 30px; (Góc trái trên 0px, góc phải trên 5px, góc phải dưới 15px, góc trái dưới 30px)</div>

<div style="border-radius: 50px 0px;">border-radius: 50px 0px; (Góc trái trên và góc phải dưới 50px, góc phải trên và góc trái dưới 0px)</div>

<div style="border-radius: 1em;">border-radius: 1em; (Bo tròn 4 góc 1em)</div>

<div style="border-radius: 0em 1em 2em 3em;">border-radius: 0em 1em 2em 3em; (Góc trái trên 0em, góc phải trên 1em, góc phải dưới 2em, góc trái dưới 3em)</div>

<div style="border-radius: 5%;">border-radius: 5%; (Bo tròn 4 góc 5%)</div>

</body>
</html>
Chạy Thử Css border-radius từng góc nằm trong bài viết Thuộc tính border-radius trong CSS