Đị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; |
Ví dụ
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 | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| border-radius | 9 | 4 | 10.5 | 5 | 5.1 | 3.2 | 2.1 | 7.5 |