層疊樣式表/邊框
CSS 提供了多種方法來設定盒元素邊框的外觀，分別針對頂部邊框、底部邊框、左邊框和右邊框。您可以設定每個邊框的厚度或寬度、顏色和樣式（例如點狀）。
border-top-styleW3C 規範 CSS2.1border-right-styleW3C 規範 CSS2.1border-bottom-styleW3C 規範 CSS2.1border-left-styleW3C 規範 CSS2.1邊框樣式
以下值對邊框樣式屬性有效
nonedotteddashedsoliddoublegrooveridgeinsetoutset
CSS 規則
p {
border-style-top: dotted;
border-style-right: solid;
border-style-bottom: dashed;
border-style-left: groove;
padding: 0.5em /* Leave a gap between the content and the borders. */
}
示例 HTML
<p>Different borders can be set on the four sides of an element.</p>
可以在元素的四邊設定不同的邊框。
border-top-widthW3C 規範 CSS1 CSS2.1border-right-widthW3C 規範 CSS1 CSS2.1border-bottom-widthW3C 規範 CSS1 CSS2.1border-left-widthW3C 規範 CSS1 CSS2.1
邊框寬度屬性可以設定為任何非負長度或三個關鍵字值之一：thin、medium 和 thick。thick 邊框保證至少與 medium 邊框一樣寬，而 medium 邊框至少與 small 邊框一樣寬。
CSS 規則
p {
border-style:solid;
padding:0.5em /* Leave a gap between the content and the borders. */
}
#para1 {
border-width-top:0;
border-width-right:thin;
border-width-bottom:medium;
border-width-left:thick
}
#para2 {
border-width-top:0.25em;
border-width-right:0.5em;
border-width-bottom:0.75em;
border-width-left:1em
}
示例 HTML
<p id="para1">The border on three sides of this paragraph are specified by keywords.
The top border is zero width.
</p>
<p id="para2">This paragraph's borders are given as lengths, increasing in quarter
<code>em</code> increments.
</p>
本段的三個邊框由關鍵字指定。頂部邊框的寬度為零。
本段的邊框以長度給出，以四分之一em的增量遞增。
如果一側的邊框樣式已設定為 none，則該邊框的寬度將被視為零，無論該邊框寬度的設定值為多少。
CSS 規則
p {
border-style:solid;
border-width:1em;
padding:0.5em /* Leave a gap between the content and the borders. */
}
#para2 {
border-style-left:none
}
示例 HTML
<p id="para1">This paragraph has a solid <code>1em</code> border.</p>
<p id="para2">The left border of this paragraph has been set to <code>none</code>.
Notice that the border width has effectively been set to zero.
</p>
本段有一個實心的 1em 邊框。
本段的左邊框已設定為 none。請注意，邊框寬度實際上已設定為零。
border-top-colorW3C 規範 CSS2.1border-right-colorW3C 規範 CSS2.1border-bottom-colorW3C 規範 CSS2.1border-left-colorW3C 規範 CSS2.1
邊框顏色屬性可以設定為任何CSS 顏色或關鍵字 transparent。如果沒有指定顏色，則邊框顏色屬性將預設為元素的 color 值。
示例 1
CSS 規則
p {
border-style: solid;
border-width: 2em;
border-color-top: red;
border-color-right: green;
border-color-bottom: blue;
border-color-left: yellow;
padding: 0.5em; /* Leave a gap between the content and the borders. */
width: 10em /* Narrow the box a bit. */
}
示例 HTML
<p>For example the border of this box should have four different colours.</p>
示例渲染
例如，此框的邊框應具有四種不同的顏色。
示例 2
CSS 規則
p {
border-style: solid;
border-width: 2em;
padding: 0.5em /* Leave a gap between the content and the borders. */
}
#para1 {
color: red
}
#para1 {
color: green
}
示例 HTML
<p id="para1">This paragraph has red text and a red border.</p>
<p id="para2">This paragraph has green text and a green border.</p>
示例渲染
本段的文字為紅色，邊框為紅色。
本段的文字為綠色，邊框為綠色。
border-topW3C 規範 CSS1 CSS2.1border-rightW3C 規範 CSS1 CSS2.1border-bottomW3C 規範 CSS1 CSS2.1border-leftW3C 規範 CSS1 CSS2.1
h1 {
border: black solid thin;
}
在所有 h1 元素的內容和填充周圍建立一條黑色線。在本例中，第一個值為顏色，第二個值為線條型別，第三個值為線條粗細。各個屬性的值可以以任何順序出現。以下兩個規則等同於前面的規則。
h1 {
border: solid black thin;
}
h1 {
border: thin black solid;
}
邊框半徑 樣式是CSS3 背景和邊框模組的一部分。目前，border-radius 受 WebKit（Safari、Chrome 等）和 Presto（Opera）支援。Gecko（Firefox、Iceweasel）使用 -moz- 字首和略有不同的語法支援它。Trident（Internet Explorer）將在下一個版本（版本 5，IE 9）中支援它。WebKit 最近才開始支援它而沒有字首，因此設計師可能希望在他們的表格中保留 -webkit- 字首以保持一段時間的後向相容性。
語法
border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?;
border-top-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
border-top-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
border-bottom-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
border-bottom-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
邊框半徑每個引數至少需要一個長度值，用於指定該角半徑的長度。兩個半徑之間用 / 分隔表示它是一個橢圓。
| CSS3 | WebKit | Gecko | Presto | Trident |
|---|---|---|---|---|
| border-radius | border-radius | -moz-border-radius | border-radius | border-radius |
| border-top-left-radius | border-top-left-radius | -moz-border-radius-topleft | border-top-left-radius | border-top-left-radius |
| border-top-right-radius | border-top-right-radius | -moz-border-radius-topright | border-top-right-radius | border-top-right-radius |
| border-bottom-right-radius | border-bottom-right-radius | -moz-border-radius-bottomright | border-bottom-right-radius | border-bottom-right-radius |
| border-bottom-left-radius | border-bottom-left-radius | -moz-border-radius-bottomleft | border-bottom-left-radius | border-bottom-left-radius |
div {
border-radius: 10px;
-moz-border-radius: 10px;
}
以之前的示例為例
p {
border-style: solid;
border-width: 2em;
border-color-top: red;
border-color-right: green;
border-color-bottom: blue;
border-color-left: yellow;
padding: 0.5em; /* Leave a gap between the content and the borders. */
width: 10em /* Narrow the box a bit. */
border-radius: 2em;
}
示例 HTML
<p>For example the border of this box should have four different colours and rounded corners.</p>
示例渲染
例如，此框的邊框應具有四種不同的顏色和圓角。
邊框半徑可以應用於設計師想要的任何型別的邊框（但必須注意使其看起來美觀）。
nonedotteddashedsoliddoublegrooveridgeinsetoutset
四個角的半徑不必相同。您可以隨意混合和匹配任何半徑組合。
此 div 適用於網頁頂部。在沒有單位的情況下放入 0 表示不應用任何半徑。
<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; border-radius: 0 0 10px 10px;">
This div is suited for the top of a web page. Putting a '''0''' in without a unit indicates that no radius is to be applied.
</div>
相反，此 div 適用於頁面底部。
<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
Conversely, this one is suited for the bottom of a page.
</div>
您也可以製作一些花哨的東西。
<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; border-radius: 10px 0 10px 0; height: 100px; width: 100px;">
You can also make something fancy.
</div>
在引數中使用 / 分隔的兩個長度將為該角或多個角生成橢圓。
一個帶有 border-radius: 5px / 10px; 的 div。
一個帶有 border-radius: 5px / 10px; 的 div。
待定
有關表格中的邊框合併，請參見章節 表格。
- 8.5 邊框屬性 在層疊樣式表級別 2 修訂版 1（CSS 2.1）規範，w3.org