Thuộc tính border-radius

Định nghĩa và sử dụng

Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ở css2 (Xem thêm về border trong css2).

Cấu trúc

tag {
    border: bề-dày kiểu mã-màu;
    border-radius: giá trị;
    -moz-border-radius: giá trị;
    -webkit-border-radius: giá trị;
    -ms-border-radius: giá trị;
    -o-border-radius: giá trị;
}

Trong đó:

  • -moz-animation hỗ trợ cho firefox.
  • -webkit-animation hỗ trợ cho Google Chrome và Safari.
  • -ms-animation hỗ trợ cho Internet Explorer.
  • -o-animation hỗ trợ cho Opera.

Thuộc tính của border-radius trong css3:

Thuộc tính giá trị Ví dụ Mô tả
border-top-left-radius 1 giá trị
[top-left]
border-top-left-radius: 5px; Góc trên - bên trái sẽ được uốn cong.
2 giá trị
[top] [left]
border-top-left-radius: 5px 10px;
border-top-right-radius 1 giá trị
[top-right]
border-top-right-radius: 5px; Góc trên - bên phải sẽ được uốn cong.
2 giá trị
[top] [right]
border-top-right-radius: 5px 10px;
border-bottom-left-radius 1 giá trị
[bottom-left]
border-bottom-left-radius: 5px; Góc dưới - bên trái sẽ được uốn cong.
2 giá trị
[bottom] [left]
border-bottom-left-radius: 5px 10px;
border-bottom-right-radius 1 giá trị
[bottom-right]
border-bottom-right-radius: 5px; Góc dưới - bên phải sẽ được uốn cong.
2 giá trị
[bottom] [right]
border-bottom-right-radius: 5px 10px;
border-radius 1 giá trị
[top-left top-right bottom-left bottom-right]
border-radius: 5px; Cả 4 góc đều được uốn cong.
2 giá trị
[top-left bottom-right] [top-right bottom-left]
border-radius: 5px 10px;
3 giá trị
[top-left]
[top-right bottom-left]
[bottom-right]
border-radius: 5px 10px 4px;
4 giá trị
[top-left] [top-right] [bottom-left]
[bottom-right]
border-radius: 5px 10px 4px 8px;

HTML viết:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

border image

CSS viết:

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border image

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính border-radius:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
border-radius 9 4 10.5 5 5.1 3.2 2.1 7.5

THÔNG BÁO LỖI