Thuộc tính bán kính đường viền CSS
Thí dụ
Thêm các góc tròn vào hai phần tử <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc border-radiustính xác định bán kính của các góc của phần tử.
Mẹo: Thuộc tính này cho phép bạn thêm các góc tròn vào các phần tử!
Thuộc tính này có thể có từ một đến bốn giá trị. Đây là các quy tắc:
Bốn giá trị - bán kính đường viền: 15px 50px 30px 5px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải, giá trị thứ ba áp dụng cho góc dưới cùng bên phải và giá trị thứ tư áp dụng cho góc dưới bên trái):
Ba giá trị - border-radius: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải và dưới cùng bên trái và giá trị thứ ba áp dụng cho góc dưới cùng bên phải):
Hai giá trị - border-radius: 15px 50px; (giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải và giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái):
Một giá trị - border-radius: 15px; (giá trị áp dụng cho tất cả bốn góc, được làm tròn bằng nhau:
| Giá trị mặc định: | 0 |
|---|---|
| Thừa hưởng: | không |
| Hoạt hình: | Đúng. Đọc về hoạt hình |
| Phiên bản: | CSS3 |
| Cú pháp JavaScript: | đối tượng .style.borderRadius = "25px" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Cú pháp CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Lưu ý: Bốn giá trị cho mỗi bán kính được đưa ra theo thứ tự 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 bỏ qua dưới cùng bên trái, nó sẽ giống như trên cùng bên phải. Nếu bỏ qua dưới cùng bên phải, nó sẽ giống như trên cùng bên trái. Nếu trên cùng bên phải bị bỏ qua, nó giống như trên cùng bên trái.
Giá trị tài sản
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Đặt các góc tròn cho một phần tử có màu nền:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Thí dụ
Đặt các góc tròn cho phần tử có đường viền:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Thí dụ
Đặt các góc tròn cho một phần tử có hình nền:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Thí dụ
Cũng lưu ý điều này:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
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; */
Các trang liên quan
Hướng dẫn CSS: CSS Rounded Corners
Tham chiếu DOM HTML: thuộc tính borderRadius