Analysis of CSS Border properties: Width & style & borders, etc.

This article introduces to you about the analysis of CSS Border properties: Width & style & border, etc., there is a certain reference value, the need for friends can refer to, I hope you have some help.

Definition and usage

One or more lines around the element content and padding.

Basic Properties: width, style, color

Width border-width

• The Border-width shorthand property sets the width for all borders of an element, or individually for each edge border.

• The value can be a specified length, such as 1px, or one of three keywords:,,, thin medium thick is thin, medium (default), and thick, respectively.

• Only works if the border style is not none. If the border style is none, the border width is actually reset to 0. You are not allowed to specify a negative length value.

• The border is set in Top-right-bottom-left order, knowing the order is abbreviated.

Style Border-style

The Border-style property is used to set the style of the element border.

value The

description
None	defines no border.
hidden	is the same as "none". Except when applied to tables, hidden is used to resolve border conflicts for tables.
dotted	defines a point border. Renders as solid lines in most browsers.
Dashed	defines the dashed line. Renders as solid lines in most browsers.
Solid	defines a solid line.
Double	defines two lines. The width of the double line equals the value of border-width.
Groove	defines a 3D groove border. The effect depends on the value of the Border-color.
Ridge	defines a 3D ridge border. The effect depends on the value of the Border-color.
inset	defines a 3D inset border. The effect depends on the value of the Border-color.
outset	defines a 3D outset border. The effect depends on the value of the Border-color.

• The default value is none , so if you want the border to appear, you must declare a style.

• You can define multiple styles for a border.

• The border may appear only if the value is not none.

Color Border-color

The Border-color property is used to set the color of the element border.

• The default border colors are the foreground color of the element itself. If no color is declared for the border, it will be the same as the text color of the element. On the other hand, if the element does not have any text, assuming it is a table that contains only the image, the border color of the table is the text color of its parent element (because color can inherit). This parent element is most likely a body, p, or another table.

• The border can be set to transparent with a value of transparent . This value is used to create an invisible border with a width.

Borders and backgrounds

The border is above the background of the element.

Border rounded corners

The rounded effect around the element is a feature that is often needed, and border-radius properties can be rounded.

• IE9 Previous versions are not compatible with fillet properties.

• The value is the specified length, such as 4px.

Extended Properties

Border Image Border-image