border-end-start-radius
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Thuộc tính border-end-start-radius trong CSS xác định bán kính đường viền logic trên một phần tử, ánh xạ tới bán kính đường viền vật lý phụ thuộc vào writing-mode, direction và text-orientation của phần tử. Điều này hữu ích khi xây dựng các kiểu hoạt động bất kể hướng văn bản và chế độ viết.
Thuộc tính này ảnh hưởng đến góc giữa cạnh block-end và cạnh inline-start của phần tử. Ví dụ, trong chế độ viết horizontal-tb với hướng ltr, nó tương ứng với thuộc tính border-bottom-left-radius.
Try it
border-end-start-radius: 80px 80px;
border-end-start-radius: 250px 100px;
direction: rtl;
border-end-start-radius: 50%;
writing-mode: vertical-lr;
border-end-start-radius: 50%;
writing-mode: vertical-rl;
<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
/* Giá trị <length> */
/* Với một giá trị, góc sẽ là hình tròn */
border-end-start-radius: 10px;
border-end-start-radius: 1em;
/* Với hai giá trị, góc sẽ là hình elip */
border-end-start-radius: 1em 2em;
/* Giá trị toàn cục */
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-radius: unset;
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 chính và bán phụ của hình elip. Là độ dài tuyệt đối, có thể biểu thị bằng bất kỳ đơn vị nào được cho phép bởi kiểu dữ liệu CSS
<length>. Phần trăm cho trục ngang tham chiếu đến chiều rộng của hộp, phần trăm cho trục dọc tham chiếu đến chiều cao của hộp. Giá trị âm không hợp lệ.
Đị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-end-start-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ụ
Bán kính đường viền với văn bản dọc
HTML
<div>
<p class="exampleText">Example</p>
</div>
CSS
div {
background-color: rebeccapurple;
width: 120px;
height: 120px;
border-end-start-radius: 10px;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: white;
border-end-start-radius: 10px;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Logical Properties and Values Module Level 1 # border-radius-properties |
Tương thích trình duyệt
Xem thêm
- Thuộc tính và giá trị logic CSS
- Thuộc tính vật lý tương ứng:
border-top-right-radius writing-mode,direction,text-orientation