border-bottom-left-radius
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính border-bottom-left-radius trong CSS làm tròn góc dưới bên trái của một phần tử bằng cách chỉ định bán kính (hoặc bán kính trục lớn và trục nhỏ) của hình elip xác định độ cong của góc.
Try it
border-bottom-left-radius: 80px 80px;
border-bottom-left-radius: 250px 100px;
border-bottom-left-radius: 50%;
border-bottom-left-radius: 50%;
border: black 10px double;
background-clip: content-box;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a bottom left rounded corner.
</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #5b6dcd;
color: white;
padding: 10px;
}
Cú pháp
/* góc là hình tròn */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;
/* Giá trị phần trăm */
/* hình tròn nếu hộp là hình vuông hoặc hình elip nếu hộp là hình chữ nhật */
border-bottom-left-radius: 20%;
/* giống như trên: 20% theo chiều ngang (rộng) và dọc (cao) */
border-bottom-left-radius: 20% 20%;
/* 20% theo chiều ngang (rộng) và 10% theo chiều dọc (cao) */
border-bottom-left-radius: 20% 10%;
/* góc là hình elip */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;
/* Giá trị toàn cục */
border-bottom-left-radius: inherit;
border-bottom-left-radius: initial;
border-bottom-left-radius: revert;
border-bottom-left-radius: revert-layer;
border-bottom-left-radius: unset;
Với một giá trị:
- giá trị là
<length>hoặc<percentage>biểu thị bán kính của hình tròn dùng cho đường viền ở góc đó.
Với hai giá trị:
- giá trị đầu tiên là
<length>hoặc<percentage>biểu thị trục bán lớn ngang của hình elip dùng cho đường viền ở góc đó. - giá trị thứ hai là
<length>hoặc<percentage>biểu thị trục bán lớn dọc của hình elip dùng cho đường viền ở góc đó.
Giá trị
<length-percentage>-
Biểu thị kích thước bán kính hình tròn hoặc các trục bán lớn và bán nhỏ của hình elip. Là độ dài tuyệt đối, nó có thể được biểu thị bằng bất kỳ đơn vị nào được phép bởi kiểu dữ liệu CSS
<length>. Phần trăm theo trục ngang tham chiếu đến chiều rộng của hộp, phần trăm theo trục dọc tham chiếu đến chiều cao của hộp. Giá trị âm không hợp lệ.
Mô tả
Việc làm tròn có thể là hình tròn hoặc hình elip, hoặc nếu một trong các giá trị là 0 thì không có làm tròn và góc là hình vuông.
Nền, dù là hình ảnh hay màu sắc, đều bị cắt theo đường viền, kể cả đường viền tròn; vị trí cắt chính xác được xác định bởi giá trị của thuộc tính background-clip.
Note:
Nếu giá trị của thuộc tính này không được đặt trong thuộc tính viết tắt border-radius được áp dụng cho phần tử sau thuộc tính CSS border-bottom-left-radius, thì giá trị của thuộc tính này sẽ được đặt lại về giá trị ban đầu bởi thuộc tính viết tắt.
Định nghĩa hình thức
| Initial value | 0 |
|---|---|
| Applies to | all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute <length>s or <percentage>s |
| Animation type | a length, percentage or calc(); |
Cú pháp hình thức
border-bottom-left-radius =
<border-radius>
<border-radius> =
<slash-separated-border-radius-syntax> |
<legacy-border-radius-syntax>
<slash-separated-border-radius-syntax> =
<length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?
<legacy-border-radius-syntax> =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Ví dụ
Cung của hình tròn
Một giá trị <length> duy nhất tạo ra cung của hình tròn.
div {
border-bottom-left-radius: 40px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Cung của hình elip
Hai giá trị <length> khác nhau tạo ra cung của hình elip.
div {
border-bottom-left-radius: 40px 20px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Phần tử hình vuông với bán kính phần trăm
Phần tử hình vuông với một giá trị <percentage> duy nhất tạo ra cung của hình tròn.
div {
border-bottom-left-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Phần tử không vuông với bán kính phần trăm
Phần tử không vuông với một giá trị <percentage> duy nhất tạo ra cung của hình elip.
div {
border-bottom-left-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 200px;
height: 100px;
}
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-radius |
Tương thích trình duyệt
Xem thêm
- Thuộc tính viết tắt
border-radius border-top-right-radius,border-bottom-right-radiusvàborder-top-left-radius