border-start-end-radius
border-start-end-radius CSS 屬性定義了元素的邏輯邊框半徑，該半徑根據元素的 writing-mode、direction 和 text-orientation 對映到物理邊框半徑。這對於構建樣式非常有用，無論 文字方向 和 書寫模式 如何，都能正常工作。
試一試
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;
}
此屬性影響元素塊級起始側和行內結束側之間的角。例如，在 horizontal-tb 書寫模式且 ltr 方向下，它對應於 border-top-right-radius 屬性。
語法
css
/* <length> values */
/* With one value the corner will be a circle */
border-start-end-radius: 10px;
border-start-end-radius: 1em;
/* With two values the corner will be an ellipse */
border-start-end-radius: 1em 2em;
/* Global values */
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;
值
<length-percentage>-
表示圓的半徑或橢圓的半長軸和半短軸的大小。作為絕對長度，它可以表示為 CSS
<length>資料型別允許的任何單位。百分比值中，水平軸的百分比值參照框的寬度，垂直軸的百分比值參照框的高度。負值無效。
正式定義
| 初始值 | 0 |
|---|---|
| 應用於 | 所有元素；但當border-collapse為collapse時，使用者代理不要求應用於table和inline-table元素。目前，內部表格元素的行為未定義。它也適用於::first-letter。 |
| 繼承性 | 否 |
| 百分比 | 參考邊框框的相應維度 |
| 計算值 | 兩個絕對 <length> 或 <percentage> 值 |
| 動畫型別 | 一個長度、百分比或 calc()； |
正式語法
border-start-end-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
示例
帶有垂直文字的邊框半徑
HTML
html
<div>
<p class="exampleText">Example</p>
</div>
CSS
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;
}
結果
規範
| 規範 |
|---|
| CSS 邏輯屬性和值第 1 級 # border-radius-properties |
瀏覽器相容性
載入中…