Thuộc tính border-radius trong CSS, bo tròn góc phần tử
Để bo tròn các góc của phần tử, bạn sử dụng thuộc tính border-radius, giá trị nhận của thuộc tính là bán bo tròn góc:
Cú pháp như sau:
border-radius: [radius value] [radius value]? [radius value]? [radius value]?;
Các giá trị liệt kê là bán kính góc bo tròn, các giá trị có dấu ? là tùy chọn (có thể không có). Như vậy thiết lập giá trị cho border-radius có thể là 1 đến 4 tham số bán kínhh
Cụ thể:
| Đủ 4 giá trị |
border-radius: 10px 20px 30px 40px; Bán kính bo tròn góc theo tứ tự là các góc: trên trái (10px), trên phải (20px), dưới phải (30px), dưới trái (40px) <div style="height: 100px;
width: 100px;
background: green;
border-radius: 10px 20px 30px 40px;">
</div>
|
| Nhận 3 giá trị |
border-radius: 5px 20px 50px; Bán kính bo tròn góc theo tứ tự là các góc: trên trái (5px), trên phải và dưới trái nhận giá trị thứ 2 (20px) dưới phải là giá trị thứ 3 (50px) <div style="height: 100px;
width: 100px;
background: green;
border-radius: 5px 20px 50px;">
</div>
|
| Nhận 2 giá trị |
border-radius: 5px 40px; Bán kính bo tròn góc theo tứ tự là các góc: trên trái và dưới phải nhận giá trị thứ nhất (5px), dưới trái và trên phải nhận giá trị thứ hai (40px) <div style="height: 100px;
width: 100px;
background: green;
border-radius: 5px 40px;">
</div>
|
| Nhận 1 giá trị |
border-radius: 10px; Bán kính bo tròn cả 4 góc đều bằng nhau (10px) <div style="height: 100px;
width: 100px;
background: green;
border-radius: 10px;">
</div>
|
Tạo ra hình tròn sử dụng border-radius
Bạn có thể chuyển hình vuông thành tròn, bằng cách điều chỉnh bán kính bo tròn các góc bằng nửa kích thước hình vuông của phần tử HTML
<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>
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
