Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Style borderBottomLeftRadius thuộc tính

BorderBottomLeftRadius được sử dụng để thêm các góc tròn vào đường viền dưới cùng bên phải của phần tử. Chúng ta có thể đặt và lấy hình dạng đường viền ở góc dưới cùng bên trái.

Cú pháp

Sau đây là cú pháp cho -

Đặt 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 -

Sr.No Giá trị &Mô tả
1 length
Để xác định hình dạng góc dưới cùng bên trái
2 %
Để xác định hình dạng góc dưới cùng bên trái theo tỷ lệ phần trăm.
3 tên ban đầu
Để đặt thuộc tính này thành giá trị ban đầu.
4 inherit
Để kế thừa giá trị tài sản mẹ

Ví dụ

Chúng ta hãy xem một ví dụ 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="The bottom border left radius is now decreased";
   }
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above image bottom left border size by clicking the below button</p>
<button onclick="changeBottomBorder()">Change Bottom Border</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Style borderBottomLeftRadius thuộc tính

Khi nhấp vào nút “Thay đổi đường viền dưới cùng” -

HTML DOM Style borderBottomLeftRadius thuộc tính