Borders are a frequently used style. Pictures can have borders, and tables basically have borders, so learning about borders is very important. This article will introduce the usage of CSS borders.
A border in CSS is one or more line segments that surround an element's content and padding. You can customize the style, width, and color of these line segments. You can define the style, width and color of the border through the following properties.
1. Border-style
You can set the border style through border-style. The commonly used borders are solid, dotted, and dashed.
<pclass=border-solid>Demonstrates a solid border</p><pclass=border-dotted>Demonstrates a dotted border</p><pclass=border-dashed>Demonstrates a dotted border</p>
CSS code:
.border-solid{border-style:solid;}.border-dotted{border-style:dotted;}.border-dashed{border-style:dashed;}Operation effect:
Optional values for the border-style attribute are as follows:
2. Border-width
The width of the border can be adjusted through border-width, and the unit is generally px pixels.
<pclass=border-thick>Demonstrates thick borders</p><pclass=border-thin>Demonstrates thin borders</p>
The CSS code can be adjusted according to the actual situation. It is only for demonstration.
.border-thick{border-style:solid;border-width:4px;}.border-thin{border-style:solid;border-width:1px;}Operation effect:
Optional values for the border-width attribute are as follows:
3. Border color border-color
You can use bolder-color to specify the color of the border, HTML code:
<pclass=border-red>Demo red border</p><pclass=border-green>Demo green border</p>
CSS code:
.border-red{border-style:solid;border-color:red;}.border-green{border-style:solid;border-color:green;}Operation effect:
Optional values for the border-color property are as follows:
4.border
The border attribute is the abbreviation of the border-width, border-style, and border-color attributes introduced above. The border attribute can be used to define the above three attributes at the same time. The syntax format is as follows:
border:border-widthborder-styleborder-color;
Among them, border-width is used to set the width of the border; border-style is used to set the style of the border; border-color is used to set the color of the border.