Tên riêng của HTML DOM borderRadius được sử dụng để thêm các góc tròn vào bốn cạnh của phần tử. Sử dụng thuộc tính này, chúng ta có thể đặt và lấy các thuộc tính bán kính đường viền như borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius.
Sau đây là cú pháp cho -
Đặt thuộc tính borderRadius:
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
Các giá trị thuộc tính được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| chiều dài | Để xác định hình dạng đường viền. |
| % | Để xác định hình dạng đường viền theo tỷ lệ phần trăm. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính borderRadius -
Ví dụ
<!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="The border radius for the four borders of the above div are now increased";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Increase the above div border radius size by clicking the below button</p>
<button onclick="changeBorderRadius()">Change Border Radius</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “Thay đổi bán kính đường viền” -
