Thuộc tính CSS border-bottom-left-radius
Thí dụ
Thêm đường viền tròn vào góc dưới cùng bên trái của hai phần tử <div>:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-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-bottom-left-radius
tính xác định bán kính của góc dưới cùng bên trái.
Mẹo: Thuộc tính này cho phép bạn thêm đường viền tròn vào các phần tử!
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.borderBottomLeftRadius = "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-bottom-left-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-bottom-left-radius: length|% [length|%]|initial|inherit;
Lưu ý: Nếu bạn đặt hai giá trị, giá trị đầu tiên dành cho đường viền dưới cùng và giá trị thứ hai dành cho đường viền bên trái. Nếu giá trị thứ hai bị bỏ qua, nó sẽ được sao chép từ giá trị đầu tiên. Nếu một trong hai chiều dài bằng 0, góc là hình vuông, không được làm tròn.
Giá trị tài sản
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner 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ụ
Thêm đường viền tròn vào góc dưới cùng bên trái theo phần trăm:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
Các trang liên quan
Hướng dẫn CSS: CSS Rounded Corners
Tham chiếu HTML DOM: thuộc tính borderBottomLeftRadius