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

段落文字部分

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.