How to set paragraph borders in css-Front-end Q&A-php.cn

How to set paragraph borders in css

青灯夜游

Release： 2022-01-20 17:40:51

Original

2682 people have browsed it

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.

How to set paragraph borders in css

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>

Copy after login

How to set paragraph borders in css

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>

Copy after login

How to set paragraph borders in css

（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!