CSS border
CSS Border
The border of an element is one or more lines surrounding the element's content and padding.
The CSS border property allows you to specify the style, width, and color of an element's border.
CSS Border
In HTML, we use tables to create borders around text, but by using the CSS border property, we can create stunning borders. and can be applied to any element.
The inner margin of the element is the border of the element. An element's border is one or more lines that surround the element's content and inner borders.
Each border has 3 aspects: width, style, and color. In the following pages, we will explain these three aspects to you in detail.
Borders and Background
The CSS specification states that borders are drawn "above the background of an element." This is important because some borders are "interrupted" (for example, dotted or dashed borders) and the element's background should appear between the visible parts of the border.
CSS2 states that the background only extends to the padding, not the border. Later CSS2.1 made a correction: the background of the element is the background of the content, padding and border areas. Most browsers follow the CSS2.1 definition, although some older browsers may behave differently.
The style of the border
The style is the most important aspect of the border. This is not because the style controls the display of the border (of course, the style does control the display of the border) , but because without the style there would be no border at all.
CSS’s border-style property defines 10 different non-inherit styles, including none.
For example, you can define the border of an image as outset to make it look like a "raised button":
a:link img {border-style: outset; }
border-style value:
none: Default no border
dotted: dotted: Define a dotted line frame
dashed: Define a dashed box
solid: Define a solid boundary
double: Define two boundaries. The width of the two borders and the value of border-width are the same
groove: Define the 3D groove boundary. The effect depends on the color value of the border
ridge: Defines the 3D ridge border. The effect depends on the color value of the border
inset: Defines a 3D inset border. The effect depends on the color value of the border
outset: Defines a 3D protruding border. The effect depends on the color value of the border
Defining multiple styles
You can define multiple styles for a border, for example:
p.aside {border-style: solid dotted dashed double;}
The above rule defines four border styles for the paragraph with the class name aside: solid line border, dotted line right border, and dotted line bottom border and a double-line left border.
We see again that the values here adopt the order of top-right-bottom-left. We have also seen this order when discussing how to set different paddings with multiple values.
Define single-side style
If you want to set the border style for a certain side of the element box, instead of setting the border style for all 4 sides, you can use the following The single-sided border style attribute:
border-top-style
border-right-style
border-bottom-style
border-left- style
So these two methods are equivalent:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left- style: none;}
Note: If you want to use the second method, you must put the unilateral attribute after the abbreviated attribute. Because if you put the single-sided attribute before border-style, the value of the abbreviated attribute will overwrite the single-sided value none.
Border - abbreviation attribute
The above example uses many attributes to set the border.
You can also set the border in a property.
You can set it in the "border" attribute:
border-width
border-style (required)
border-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
border:5px solid orange;
}
</style>
</head>
<body>
<p>段落文字部分</p>
</body>
</html> CSS Border Properties statement.
border-style Used to set the style of all borders of an element, or set the border style for each side individually.
# Border-Width abbreviation attributes are used to set width for all borders of the element, or set width for each border.
# Border-COLOR abbreviation attributes, set the color of the part of all the borders of the element, or set the color separately for the 4 sides.
border-bottom Shorthand property, used to set all properties of the bottom border into one statement.
border-bottom-color Set the color of the bottom border of the element.
border-bottom-style Set the style of the bottom border of the element.
border-bottom-width Set the width of the bottom border of the element.
Border-Left abbreviation attribute, which is used to set all the attributes of the left frame into a statement.
border-left-color Set the color of the left border of the element.
border-left-style Set the style of the left border of the element.
border-left-width Set the width of the left border of the element.
border-right Shorthand attribute, used to set all attributes of the right border into one statement.
border-right-color Set the color of the right border of the element.
border-right-style Set the style of the right border of the element.
border-right-width Set the width of the right border of the element.
border-top Abbreviation attribute, used to set all attributes of the top border into one statement.
border-top-color Set the color of the top border of the element.
border-top-style Set the style of the top border of the element.
border-top-width Set the width of the top border of the element.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
