Thuộc tính borderBottomRightRadius được sử dụng để thêm góc bo tròn cho viền góc dưới bên phải của phần tử hoặc lấy giá trị đo lường của nó.
Cú pháp
Cú pháp để thiết lập hoặc lấy thuộc tính borderBottomRightRadius:
object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"
Các giá trị thuộc tính được giải thích như sau:
Giá trị
| STT | Giá trị & Mô tả |
|---|---|
| 1 | length Định dạng hình dạng góc dưới bên phải bằng đơn vị độ dài (px, em, v.v.) |
| 2 | % Định dạng hình dạng góc dưới bên phải bằng phần trăm |
| 3 | initial Đặt thuộc tính về giá trị mặc định |
| 4 | inherit Kế thừa giá trị thuộc tính từ phần tử cha |
Ví dụ
Ví dụ minh họa cho thuộc tính borderBottomRightRadius:
<!DOCTYPE html> <html> <head> <style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-right-radius: 240px 90px;
} </style> <script>
function changeBottomBorder(){
document.getElementById("DIV1").style.borderBottomRightRadius="90px 50px";
document.getElementById("Sample").innerHTML="Góc viền dưới bên phải hiện đã giảm";
} </script> </head> <body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Thay đổi kích thước góc viền dưới bên phải bằng cách nhấn nút dưới đây</p>
<button onclick="changeBottomBorder()">Thay đổi viền dưới</button>
<p id="Sample"></p> </body> </html>
Kết quả
Đoạn mã trên sẽ tạo ra kết quả như sau:
Khi nhấn nút "Thay đổi viền dưới":
