Cú pháp như sau:
border-radius: [radius value] [radius value]? [radius value]? [radius value]?;Bo góc nhận 4 giá trị:
<div style="height: 100px; width: 100px; background: green; border-radius: 10px 20px 30px 40px;"> </div>Bo góc nhận 3 giá trị:
<div style="height: 100px; width: 100px; background: green; border-radius: 5px 20px 50px;"> </div>Bo góc nhận 2 giá trị:
<div style="height: 100px; width: 100px; background: green; border-radius: 10px;"> </div>Tạo ra hình tròn sử dụng border-radius
<style>
.circleexam {
height: 200px;
width: 200px;
border-radius: 50%; /* 100px */
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
background:
url("https://images.freeimages.com/images/previews/218/my-dog-cutter-1499799.jpg")
center / cover no-repeat;
}
.circleexam > span{
display: inline-block;
vertical-align: middle;
line-height: normal;
color: red;
}
</style>
<div class="circleexam">
<span>HÌNH TRÒN</span>
</div>
HÌNH TRÒN
HÌNH TRÒN
HÌNH TRÒN
Các thuộc tính thiết lập bán kính bo tròn góc riêng lẻ
Ngoài sử dụng thuộc tính border-radius như trên, nếu chỉ cần thiết lập bo tròn một góc cụ thể nào đó thì bạn có thể sử dụng trực tiếp các thuộc tính:
- border-top-left-radius : thiết lập bán kính bo tròn góc trên trái
- border-top-right-radius : thiết lập bán kính bo tròn góc trên phải
- border-bottom-right-radius : thiết lập bán kính bo tròn góc dưới phải
- and border-bottom-left-radius : thiết lập bán kính bo tròn góc dưới trái