Thuộc tính borderBottomLeftRadius được sử dụng để thêm góc bo tròn cho viền góc dưới bên trái của phần tử. Chúng ta có thể thiết lập và lấy hình dạng viền tại góc dưới bên trái.
Cú pháp
Cú pháp để thiết lập thuộc tính borderBottomLeftRadius:
object.style.borderBottomLeftRadius = "length|% [length|%]|initial|inherit"
Giá trị
Các giá trị thuộc tính được giải thích như sau:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | length Định dạng hình dạng góc dưới bên trái bằng đơn vị độ dài |
| 2 | % Định dạng hình dạng góc dưới bên trá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 borderBottomLeftRadius:
<!DOCTYPE html> <html> <head> <style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-left-radius: 240px 90px;
} </style> <script>
function changeBottomBorder(){
document.getElementById("DIV1").style.borderBottomLeftRadius="90px 50px";
document.getElementById("Sample").innerHTML="Góc viền dưới bên trá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 trá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":
