Thuộc tính border-radius CSS

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

Thuộc tính border-radius là một thuộc tính viết tắt, được sử dụng để thiết lập bốn thuộc tính border-*-radius.

Lưu ý:Thuộc tính này cho phép bạn thêm góc bo viền cho phần tử!

Xem thêm:

Giáo trình CSS3:BORDER trong CSS3

Ví dụ

Thêm góc bo viền cho phần tử div:

div
{
border:2px solid;
border-radius:25px;
}

Thử ngay

Có nhiều ví dụ khác ở cuối trang.

Cú pháp CSS

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

Chú ý:Thiết lập bốn giá trị cho mỗi radii theo thứ tự này. Nếu bỏ qua bottom-left, thì bằng với top-right. Nếu bỏ qua bottom-right, thì bằng với top-left. Nếu bỏ qua top-right, thì bằng với top-left.

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
length Định nghĩa hình dạng góc bo. Kiểm tra
% Định nghĩa hình dạng góc bo bằng phần trăm. Kiểm tra

Ví dụ 1

border-radius:2em;

Bằng với:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Ví dụ 2

border-radius: 2em 1em 4em / 0.5em 3em;

Bằng với:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Chi tiết kỹ thuật

Giá trị mặc định: 0
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.borderRadius="5px"

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5