How to set the paragraph border in css: 1. Set the border attribute to the p element to add four top, bottom, left and right borders to the paragraph at the same time; 2. Set border-top, border-bottom, border-left, The border-right property is used to add top, bottom, left and right borders to the paragraph respectively.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css setting paragraph border
1. Use the border attribute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>测试元素</p>
</body>
</html>
2. Use the border-top, border-bottom, border-left, and border-right attributes respectively.
border-top abbreviation attribute, use To set all the properties of the top border into one statement.
border-bottom shorthand attribute, used to set all attributes of the bottom border into one statement.
border-left shorthand property, used to set all properties of the left border into one statement.
border-right shorthand property, used to set all properties of the right border into one statement.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
padding: 10px;
border-top: 2px solid red;
border-bottom: 2px solid paleturquoise;
border-left: 2px solid green;
border-right: 2px solid blue;
}
</style>
</head>
<body>
<p>测试元素</p>
</body>
</html>（Learning video sharing: css video tutorial）
The above is the detailed content of How to set paragraph borders in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
