Home >Web Front-end >CSS Tutorial >How to set the border width in css
How to set the border width in css
- 青灯夜游Original
- 2021-04-21 16:21:0611682browse
In CSS, you can use the border-width attribute to set the width of the border. The syntax format is "border-width: keyword | value with length unit;"; among them, the keyword can be thin (thin) border), medium (medium border), thick (thick border).
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css sets the width of the border
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:thick;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>
</html>Rendering:
Description:
The "border-width" attribute will not work if used alone. You must first use the "border-style" attribute to set the border.
css border-width property
The border-width property sets the width of the four borders of an element.
Attribute value:
| Value | Description |
|---|---|
| thin | Define thin borders. |
| medium | Default. Define a medium border. |
| thick | Define a thick border. |
| length | Allows you to customize the width of the border. |
The border-width attribute can have one to four values.
Example:
border-width:thin medium thick 10px;
The upper border is a thin border
The right border is a medium border
The lower border is a thick border
The left border is a 10px wide border
border-width:thin medium thick;
The upper border It’s a thin border
The right and left borders are medium borders
The bottom border is a thick border
border-width:thin medium;
The upper and lower borders are thin borders
The right and left borders are medium borders
border-width:thin;
All 4 borders are thin borders
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set the border width in css. For more information, please follow other related articles on the PHP Chinese website!