层叠样式表/边框
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