CSS 圓角邊框

CSS 圓角邊框

border-radius 屬性用于向元素添加圓角邊框：

普通邊框

圓角邊框

圓角邊框

圓角邊框

實例

p {
  border: 2px solid red;
  border-radius: 5px;
}

親自試一試

更多實例

一個聲明中的所有上邊框屬性
本例演示簡寫屬性，用于在一條聲明中設置上邊框的所有屬性。
設置下邊框的樣式
本例演示如何設置下邊框的樣式。
設置左邊框的寬度
本例演示如何設置左邊框的寬度。
設置四條邊框的顏色
本例演示如何設置四條邊框的顏色。它可以擁有一到四種顏色。
設置右邊框的顏色
本例演示如何設置右邊框的顏色。

所有 CSS 邊框屬性

屬性 描述
border 簡寫屬性，在一條聲明中設置所有邊框屬性。
border-color 簡寫屬性，設置四條邊框的顏色。
border-radius 簡寫屬性，可設置圓角的所有四個 border-*-radius 屬性。
border-style 簡寫屬性，設置四條邊框的樣式。
border-width 簡寫屬性，設置四條邊框的寬度。
border-bottom 簡寫屬性，在一條聲明中設置所有下邊框屬性。
border-bottom-color 設置下邊框的顏色。
border-bottom-style 設置下邊框的樣式。
border-bottom-width 設置下邊框的寬度。
border-left 簡寫屬性，在一條聲明中設置所有左邊框屬性。
border-left-color 設置左邊框的顏色。
border-left-style 設置左邊框的樣式。
border-left-width 設置左邊框的寬度。
border-right 簡寫屬性，在一條聲明中設置所有右邊框屬性。
border-right-color 設置右邊框的顏色。
border-right-style 設置右邊框的樣式。
border-right-width 設置右邊框的寬度。
border-top 簡寫屬性，在一條聲明中設置所有上邊框屬性。
border-top-color 設置上邊框的顏色。
border-top-style 設置上邊框的樣式。
border-top-width 設置上邊框的寬度。