border-start-end-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-start-end-radius trong CSS định nghĩa 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ý tùy 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-start và cạnh inline-end 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-top-right-radius.
Try it
border-start-end-radius: 80px 80px;
border-start-end-radius: 250px 100px;
direction: rtl;
border-start-end-radius: 50%;
writing-mode: vertical-lr;
border-start-end-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 top right 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-start-end-radius: 10px;
border-start-end-radius: 1em;
/* Với hai giá trị, góc sẽ là hình elip */
border-start-end-radius: 1em 2em;
/* Giá trị toàn cục */
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: revert;
border-start-end-radius: revert-layer;
border-start-end-radius: unset;
Giá trị
<length-percentage>-
Biểu thị kích thước của 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. Dưới dạng độ dài tuyệt đối, nó có thể được biểu thị bằng bất kỳ đơn vị nào được phép trong kiểu dữ liệu
<length>của CSS. Tỷ lệ phần trăm cho trục ngang tham chiếu đến chiều rộng của hộp, tỷ lệ 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-start-end-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-start-end-radius: 10px;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: white;
border-start-end-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ý được ánh xạ:
border-bottom-left-radius writing-mode,direction,text-orientation