Home > Article > Web Front-end > How to add four sides of border css
How to add four sides of border css
- 藏色散人Original
- 2021-01-05 10:34:414553browse
How to set the four sides of the border in css: 1. Use the border-bottom attribute to set the bottom border; 2. Use the border-left attribute to set the left border; 3. Use the border-right attribute to set the right border; 4. Use border The -top attribute sets the top border.
The operating environment of this tutorial: Windows 7 system, css3 version, Dell G3 computer.
Related recommendations: "css video tutorial"
How to add four sides of border css?
1. Use the border attribute to set the styles of four borders at once
border: Set all border attributes in one statement.
Settable border attributes:
border-width: Specify the border width
border-style: Specify the border style
border-color: Specify the border Color
Example: Set four border styles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>Rendering:
2. Use border-bottom, border-left, border-right and border-top set the styles of four borders respectively
border-bottom: Set all bottom border properties in one statement.
border-left: Set all left border properties in one statement.
border-right: Set all right border properties in one statement.
border-top: Set all top border properties in one statement.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
border-bottom:thick dotted #ff0000;
border-left:thick solid #ff0000;
border-top:thick dashed #ff0000;
border-right:thick double #ff0000;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>Rendering:
The above is the detailed content of How to add four sides of border css. For more information, please follow other related articles on the PHP Chinese website!