border-radius - CSS | MDN

試一試

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

即使元素沒有邊框，半徑也適用於整個background；裁剪的確切位置由background-clip屬性定義。

當border-collapse為collapse時，border-radius屬性不適用於表格元素。

注意：與任何簡寫屬性一樣，單獨的子屬性不能繼承，例如border-radius:0 0 inherit inherit，這會部分覆蓋現有定義。相反，必須使用單獨的完整屬性。

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

border-radius屬性的指定方式為

一個、兩個、三個或四個<length>或<percentage>值。這用於為角設定一個單一半徑。
可選地，後面跟著"/"和一個、兩個、三個或四個<length>或<percentage>值。這用於設定一個額外的半徑，以便您可以擁有橢圓形角。

值

A light blue rectangle with a light gray border. All 4 corners are rounded.

A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded.

<length>: 使用長度值表示圓形半徑的大小，或橢圓的半長軸和半短軸。負值無效。
<percentage>: 使用百分比值表示圓形半徑的大小，或橢圓的半長軸和半短軸。水平軸的百分比參考框的寬度；垂直軸的百分比參考框的高度。負值無效。

例如

css

border-radius: 1em / 5em;

/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

css

border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

正式定義

初始值	作為簡寫中的每個屬性 `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
應用於	所有元素；但當`border-collapse`為`collapse`時，使用者代理不要求應用於`table`和`inline-table`元素。目前，內部表格元素的行為未定義。它也適用於`::first-letter`。
繼承性	否
百分比	參考邊框框的相應維度
計算值	作為簡寫中的每個屬性 `border-bottom-left-radius`: 兩個絕對`<length>`或`<percentage>` `border-bottom-right-radius`: 兩個絕對`<length>`或`<percentage>` `border-top-left-radius`: 兩個絕對`<length>`或`<percentage>` `border-top-right-radius`: 兩個絕對`<length>`或`<percentage>`
動畫型別	作為簡寫中的每個屬性 `border-top-left-radius`: 一個長度、百分比或calc(); `border-top-right-radius`: 一個長度、百分比或calc(); `border-bottom-right-radius`: 一個長度、百分比或calc(); `border-bottom-left-radius`: 一個長度、百分比或calc();

正式語法

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

示例

比較邊框樣式

以下示例有七個<pre>元素，每個都演示了border和border-radius樣式的組合。應用於每個<pre>元素的樣式作為元素的內容包含在內，因此您可以看到建立相關邊框樣式所需的CSS宣告

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 50px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

將`corner-shape`與`border-radius`結合使用

當非0的border-radius值應用於盒子角時，您可以使用corner-shape屬性（或其長手和簡寫之一）為該角應用自定義形狀，例如斜角、切口或超橢圓。此示例演示了corner-shape的用法。

HTML

此示例的標記包含一個單獨的 <div> 元素。

html

<div></div>

CSS

我們為盒子提供了一些基本樣式，為了簡潔起見我們將其隱藏。我們還應用了一個box-shadow，一個0 20% 50px 30%的border-radius，以及一個superellipse(0.5) bevel notch squircle的corner-shape。

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 0 20% 50px 30%;
  corner-shape: superellipse(0.5) bevel notch squircle;
}

結果

渲染結果如下所示：

請注意，左上角沒有應用任何角形狀，因為它設定了border-radius為0。

規範

規範
CSS Backgrounds and Borders Module Level 3 # border-radius

瀏覽器相容性

另見

與邊框半徑相關的CSS屬性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、border-start-start-radius、border-start-end-radius、border-end-start-radius、border-end-end-radius

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN貢獻者於2025年10月13日修改。

在GitHub上檢視此頁面 • 報告此內容的問題

半徑		是`<length>`或`<percentage>`，表示用於邊框每個角的半徑。它僅用於單值語法。
左上角和右下角		是`<length>`或`<percentage>`，表示用於元素框左上角和右下角邊框的半徑。它僅用於雙值語法。
右上角和左下角		是`<length>`或`<percentage>`，表示用於元素框右上角和左下角邊框的半徑。它僅用於雙值和三值語法。
左上角		是`<length>`或`<percentage>`，表示用於元素框左上角邊框的半徑。它僅用於三值和四值語法。
右上角		是`<length>`或`<percentage>`，表示用於元素框右上角邊框的半徑。它僅用於四值語法。
右下角		是`<length>`或`<percentage>`，表示用於元素框右下角邊框的半徑。它僅用於三值和四值語法。
左下角		是`<length>`或`<percentage>`，表示用於元素框左下角邊框的半徑。它僅用於四值語法。