Thuộc tính bán kính đường viền CSS
Ví 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;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính border-radius
xác định bán kính 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 bên trái, giá trị thứ hai áp dụng cho góc trên bên phải, giá trị thứ ba áp dụng cho góc dưới bên phải và giá trị thứ tư áp dụng cho góc dưới bên trái):
Ba giá trị - bán kính đường viền: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên bên trái, giá trị thứ hai áp dụng cho góc trên bên phải và góc dưới 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ị - bán kính đường viền: 15px 50px; (giá trị đầu tiên áp dụng cho góc trên bên trái và góc dưới bên phải và giá trị thứ hai áp dụng cho góc trên bên phải và góc dưới bên trái):
Một giá trị - bán kính đường viền: 15px; (giá trị áp dụng cho 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 Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.borderRadius="25px" Hãy dùng thử |
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 là -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 phần dưới bên trái thì nó giống như phần trên bên phải. Nếu bỏ qua phần dưới bên phải thì nó giống như phần trên bên trái. Nếu bỏ qua phần trên bên phải thì nó giống như phần trên cùng bên trái.
Giá trị tài sản
Value | Description | Demo |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | Demo ❯ |
% | Defines the shape of the corners in % | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Đặt các góc tròn cho phần tử có màu nền:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví dụ
Đặt góc bo tròn cho 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;
}
Hãy tự mình thử »Ví 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; */
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Góc tròn CSS
Tham chiếu DOM HTML: thuộc tính borderRadius