Thuộc tính borderRadius trong HTML DOM Style dùng để thiết lập hoặc lấy giá trị bo góc cho bốn cạnh của phần tử. Nó cho phép kiểm soát riêng từng góc: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius.
Cú pháp
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| length | Định dạng hình状 bo góc bằng đơn vị độ dài (px, em, rem...) |
| % | Định dạng bo góc theo phần trăm so với kích thước phần tử |
| initial | Đặt lại giá trị mặc định ban đầu |
| inherit | Kế thừa giá trị từ phần tử cha |
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-radius: 1px 1px 1px 1px;
}
</style>
<script>
function changeBorderRadius() {
document.getElementById("DIV1").style.borderRadius = "45px 45px 45px 45px";
document.getElementById("Sample").innerHTML = "Bo góc bốn cạnh của div trên đã được tăng lên";
}
</script>
</head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Tăng kích thước bo góc của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBorderRadius()">Thay đổi Border Radius</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu div có bo góc rất nhỏ (1px). Sau khi nhấn nút "Thay đổi Border Radius", bốn góc được bo tròn 45px, biến hình chữ nhật thành hình elip/tron.
Mẹo: Có thể viết tắt: border-radius: 10px (4 góc), 10px 20px (trên/dưới - trái/phải), 10px 20px 30px 40px (trên-trái, trên-phải, dưới-phải, dưới-trái theo chiều kim đồng hồ).