Introduction to the border-style attribute

The border-style attribute is used to set the style of all borders of an element, or to set the border style for each side individually.

The border may appear only when this value is not none.

Example 1

border-style:dotted solid double dashed;

• The upper border is dotted

• The right border is a solid line

• The lower border is a double line

• The left border is a dotted line

Example 2

border-style:dotted solid double;

• The upper border is dotted

• The right and left borders are solid lines

• The lower border is double lines

Example 3

border-style:dotted solid;

• The upper and lower borders are dotted

• The right and left borders are solid lines

Example 4

border-style:dotted;

• All 4 borders are dotted

##Inheritance: noVersion: CSS1JavaScript Syntax:

Default value:	not specified
	object.style.borderStyle=" dotted double"

Possible values

##ValuenonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetinheritDescription

Description
Define no border.
Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.
Define dotted border. Renders as a solid line in most browsers.
Define dashed line. Renders as a solid line in most browsers.
Define a solid line.
Define double line. The width of the double line is equal to the value of border-width.
Define the 3D groove border. The effect depends on the value of border-color.
Define the 3D ridge border. The effect depends on the value of border-color.
Define the 3D inset border. The effect depends on the value of border-color.
Define the 3D outset border. The effect depends on the value of border-color.
Specifies that the border style should be inherited from the parent element.

The most unpredictable border style is double. It is defined as the width of two lines plus the space between the two lines equal to the border-width value. However, the CSS specification does not say whether one of the lines is thicker than the other or whether both lines should be equally thick, nor whether the space between the lines should be thicker than the line. All of this is decided by the user agent, and the creatives have no influence on this decision.

The above is the detailed content of Introduction to the border-style attribute. For more information, please follow other related articles on the PHP Chinese website!