Tidadigi Logo

CSS border-radius Property

Thuộc tính CSS border-radius cho phép bo tròn các góc của đường viền ngoài. Nó giúp tạo giao diện cong và mượt mà cho phần tử. Bạn có thể chỉ định một, hai, ba hoặc bốn giá trị. Việc này giúp kiểm soát bán kính của từng góc riêng lẻ.

Bằng cách dùng thuộc tính này, bạn có thể tạo ra các thiết kế hấp dẫn. Ví dụ như hình tròn hoặc các nút bo tròn. Tuy nhiên, cần lưu ý rằng thuộc tính border-radius không hoạt động trên các phần tử bảng. Điều này xảy ra khi thuộc tính border-collapse được đặt thành collapse. Trong trường hợp đó, các đường viền được xử lý khác đi.

Cú pháp

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Giá trị thuộc tính

Giá trị thuộc tínhMô tả
lengthĐại diện cho hình dạng của các góc. Thường dùng các đơn vị như px, em, hoặc rem. Giá trị mặc định là 0.
percentage (%)Đại diện cho hình dạng góc theo tỷ lệ phần trăm. Độ tròn tương ứng với kích thước của phần tử.
initialĐặt lại thuộc tính CSS của phần tử về giá trị mặc định ban đầu.
inheritKế thừa giá trị thuộc tính từ phần tử cha.

Các ký hiệu viết tắt cho border-radius

  • Áp dụng giá trị Radius cho cả bốn góc:
border-radius: value;
  • Áp dụng value1 cho góc trên bên trái và dưới bên phải; value2 cho góc trên bên phải và dưới bên trái:
border-radius: value1 value2;
  • Áp dụng value1 cho góc trên bên trái; value2 cho góc trên bên phải và dưới bên trái; value3 cho góc dưới bên phải:
border-radius: value1 value2 value3;
  • Áp dụng value1 cho góc trên bên trái; value2 cho góc trên bên phải; value3 cho góc dưới bên phải và value4 cho góc dưới bên trái:
border-radius: value1 value2 value3 value4;

Bốn giá trị cho mỗi bán kính có thể được chỉ định theo thứ tự sau. Thứ tự là trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái. Nếu giá trị dưới cùng bên trái bị bỏ qua, nó sẽ giống như giá trị trên cùng bên phải. Tương tự, nếu giá trị dưới cùng bên phải và trên cùng bên phải bị bỏ qua, nó sẽ lần lượt giống như trên cùng bên trái.

Ví dụ về CSS Border Radius

border-radius: 35px; đặt border-radius cho mỗi góc. Nó là sự kết hợp của bốn thuộc tính: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Nó đặt tất cả các góc có cùng một giá trị.

Ví dụ 1: Các góc được bo tròn cho tất cả các cạnh

Ví dụ này minh họa cách thuộc tính border-radius được áp dụng. Nó dùng để bo tròn các góc của một phần tử. Giá trị border-radius: 35px; làm tròn cả bốn góc của hộp màu xanh lá cây một cách đồng đều. Nó tạo cho hộp các cạnh cong và mượt mà. Phần tử được tạo kiểu với padding, chiều rộng và chiều cao cố định. Văn bản được căn giữa.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Rounded Corners</title>
    <style>
        .GFG {
            border-radius: 35px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2>
        <p>border-radius: 35px;</p>
    </div>
</body>
  
</html>

Đầu ra:

css-border-radius-property

border-radius: 20px 40px; đặt giá trị đầu tiên cho góc trên bên trái và dưới bên phải. Giá trị thứ hai đặt cho góc trên bên phải và dưới bên trái.

Ví dụ 2: Các góc được bo tròn với hai giá trị

Trong ví dụ này, thuộc tính border-radius được đặt thành hai giá trị, 20px 40px. Giá trị đầu tiên (20px) áp dụng cho các góc trên bên trái và dưới bên phải. Giá trị thứ hai (40px) áp dụng cho các góc trên bên phải và dưới bên trái. Điều này tạo ra các góc tròn không đối xứng. Nó tạo ra một thiết kế độc đáo cho phần tử. Phần tử cũng có padding, chiều rộng và chiều cao cố định. Văn bản được căn giữa.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Rounded Corners</title>
    <style>
        .GFG {
            border-radius: 20px 40px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2>
        <p>border-radius: 20px 40px;</p>
    </div>
</body>
  
</html>

Đầu ra:

css-border-radius-property

Ví dụ 3: Góc trên bên trái được bo tròn

Trong ví dụ này, thuộc tính border-top-left-radius được áp dụng. Nó dùng để bo tròn chỉ góc trên bên trái của phần tử với giá trị 35px. Các góc còn lại không thay đổi. Nó tạo ra một đường cong mượt mà ở phía trên bên trái. Phần còn lại của hộp vẫn giữ các cạnh sắc nét. Phần tử được tạo kiểu với padding, chiều rộng và chiều cao cố định. Văn bản được căn giữa.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Rounded Corners</title>
    <style>
        .GFG {
            border-top-left-radius: 35px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2>
        <p>border-top-left-radius: 35px;</p>
    </div>
</body>
  
</html>

Đầu ra:

css-border-radius-property

Các trình duyệt được hỗ trợ

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Microsoft Edge 12.0
  • Firefox 4.0
  • Opera 10.5
  • Safari 5.0

Lưu ý: Thuộc tính border-radius được hỗ trợ rộng rãi trên tất cả các trình duyệt chính. Nó bắt đầu từ các phiên bản được liệt kê ở trên.


Last Updated : 21/07/2025