CSS Border
CSS Border （CSS边框）
In this chapter, we will speak about borders and how we can give styles to them. We can give width, style and color to the border. （在本章中，我们将讨论边框以及如何赋予 它们。我们可以为边框赋予宽度、样式和颜色。）
Example of the border property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>
Result
Border Width
Border Width （边框宽度）
The border-width property sets the width of a border. （Border-width属性设置边框的宽度。）
The width can be specified in pixels. It can also be specified by one of the three pre-defined values: medium, thin, or thick.
You cannot use the “border-width” property alone. It will not work. Use “border-style” for setting the borders first. （您不能单独使用“border-width”属性。这是行不通的。首先使用“边框样式”来设置边框。）
Example of the border-width property:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>
Border Color
Border Color （边框颜色）
The border-color property is used to set the color of a border. The color can be set by:
name - specifies a color name, like “red” （-名称-指定颜色名称，如“红色”）
RGB - specifies a RGB value, like “rgb(255,0,0)” （- RGB -指定RGB值，如“rgb (255,0,0)”）
Hex - specifies a hex value, like “#ff0000”
You cannot use the “border-color” property alone. It will not work. Use “border-style” for setting the borders first. （您不能单独使用“border-color”属性。这是行不通的。首先使用“边框样式”来设置边框。）
Usually, we write these three properties together in one row. （通常，我们将这三个属性一起写在一行中。）
Example of the border-color property:
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>
You can try other examples with our CSS Maker tool. （您可以使用我们的CSS Maker工具尝试其他示例。）
Border Style
Border Style （边框样式）
The CSS border-style property sets the style of all four sides of an element’s borders. Borders are placed on the top of an element’s background. It can have from one to four values. So, each side can have its value. The default value of border-style is none. （CSS边框样式属性设置元素边框所有四个边的样式。边框放置在元素背景的顶部。它可以有一到四个值。因此，每一方都可以有自己的价值。border-style的默认值为none。）
Border-style has the following values:
dotted （点线）
dashed （虚线）
solid （固体）
double （double）
groove （n.成规）
ridge （棱线）
inset （内凹）
outset （外凸）
Some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one. （某些浏览器不支持某些样式。通常，当不支持某种样式时，浏览器会将边框绘制为实心边框。）
CSS Border for individual sides
CSS Border for individual sides （单个边的CSS边框）
CSS provides properties that specify each border (right, left, bottom and top). （CSS提供指定每个边框（右、左、下和上）的属性。）
The border-style property can have 4 values, for example, border-style: dotted solid double dashed; where the top border is dotted, the bottom border is double, the right border is solid, and the left border is dashed.
The border-style property can have 3 values, for example, border-style: dotted solid double; where the top border is dotted, the bottom border is double, and the right and left borders are solid.
The border-style property can have 2 values, for example, border-style: dotted solid; where the right and left borders are solid, and the top and bottom borders are dotted.
And, of course, this property can have only 1 value, for example, border-style: solid; where all the sides are solid.
Example of the border properties for individual sides:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>
CSS border as a shorthand property
CSS border as a shorthand property （CSS 边框速记属性）
The CSS border property is a shorthand property for the following individual border properties:
The CSS border-width property, which sets the width of all four sides of an element’s border. （- CSS border-width属性，用于设置元素边框所有四个边的宽度。）
The CSS border-style property, which sets the style of all four sides of an element’s borders. （- CSS边框样式属性，用于设置元素边框所有四个边的样式。）
The CSS border-color property, which sets the color of all four sides of an element’s border. （- CSS border-color属性，用于设置元素边框所有四个边的颜色。）
Example of the border shorthand property:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>
Rounded borders
Rounded borders （圆边）
Using the CSS border-radius property, you can add rounded borders to an element. （使用CSS border-radius属性，可以向元素添加圆角边框。）
Example of the border-radius property:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>
The difference between borders and outlines
The difference between borders and outlines （边框和轮廓之间的区别）
Outlines and borders are usually confusing because they are very similar. But there are differences between these two:
Outlines are drawn outside of the content of an element, so they don’t take up space. （-轮廓绘制在元素内容之外，因此不会占用空间。）
Outlines usually are rectangular, although they don’t have to be. （-轮廓通常是矩形的，但不一定是矩形的。）