Tidadigi Logo

CSS border-bottom-left-radius Property

Thuộc tính border-bottom-left-radius dùng để xác định bán kính góc dưới bên trái của đường viền. Tức là nó bo tròn góc dưới bên trái.

Cú pháp: 

border-bottom-left-radius: length|% [length|%]|initial|inherit;

Giá trị mặc định: Giá trị mặc định của nó là 0. 

Giá trị thuộc tính: 

  • Length: Thuộc tính này dùng để chỉ định bán kính của đường viền theo độ dài (ví dụ: px). Giá trị mặc định của nó là 0.
  • Inherit: Bằng cách sử dụng thuộc tính inherit, nó kế thừa các thuộc tính của phần tử cha. Sau đó dùng nó cho bán kính góc dưới bên trái hiện tại. 
  • (Percentage)%: Nó xác định bán kính góc dưới bên trái của đường viền theo phần trăm.
  • Initial: Initial đặt thuộc tính mặc định của bottom-left-radius là 0, tạo ra đường viền vuông. 
    Note: Nếu ta đặt hai giá trị cho bán kính, giá trị đầu tiên được gán cho viền dưới. Giá trị thứ hai được gán cho viền bên trái.

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính border-bottom-left-radius: 20px 50px.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-bottom-left-radius Property
    </title>
    <style>
        #bdr {
            border: 2px solid black;
            padding: 10px;
            color: #009900;
            font-size: 40px;
            border-bottom-left-radius: 25px;
        }
    </style>
</head>

<body>
    <center>
        <h2>border-bottom-left-radius: 25px:</h2>
        <div id="bdr">
            <p>GeeksforGeeks</p>
        </div>
    </center>
</body>
</html>

Đầu ra: 

css-border-bottom-left-radius-property

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính border-bottom-left-radius: % [length|%].

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-bottom-left-radius Property
    </title>
    <style>
        #bdr {
            border: 2px solid black;
            padding: 50px;
            color: #009900;
            font-size: 40px;
            border-bottom-left-radius: 50%;
        }
    </style>
</head>

<body>
    <center>
        <h2>border-bottom-left-radius: 50%:</h2>
        <div id="bdr">
            <p>GeeksforGeeks</p>
        </div>
    </center>
</body>
</html>

Đầu ra: 

css-border-bottom-left-radius-property

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính border-bottom-left-radius: initial.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-bottom-left-radius Property
    </title>
    <style>
        #bdr {
            border: 2px solid black;
            padding: 50px;
            color: #009900;
            font-size: 40px;
            border-bottom-left-radius: initial;
        }
    </style>
</head>

<body>
    <center>
        <h2>border-bottom-left-radius: initial</h2>
        <div id="bdr">
            <p>GeeksforGeeks</p>
        </div>
    </center>
</body>
</html>

Đầu ra: 

css-border-bottom-left-radius-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi CSS border-bottom-left-radius Property được liệt kê bên dưới:

  • Google Chrome 4 trở lên
  • Edge 12 trở lên
  • Internet Explorer 9 trở lên
  • Firefox 4 trở lên
  • Opera 10.5 trở lên
  • Safari 5 trở lên

Last Updated : 21/07/2025