CSS border-style

 In CSS, border styles are set through border-style. Four borders can be set at a time, or each border style can be set separately. Many elements in the webpage, especially the border styles of DIV blocks and span areas, can use border-style To design, border-style must be displayed correctly, usually including a combination of border-width (border width) and border-color (border color). Almost all mainstream browsers support CSS border-style border style properties.

CSS border-style setting syntax

description	grammar
Set four border styles	border-style: style;
Set only the top border style	border-top-style: style;
Set right border style only	border-right-style: style;
Only set the bottom border style	border-bottom-style: style;
Set the left border style only	border-left-style: style;

CSS border-style example

<div style="border-width:3px;border-style:dashed;border-color:#FFAC55;padding:5px;">
Test the border style
</div>

The output of the above example is

Test the border style

In the example, "border-style:dashed" means that the styles of the four borders are all dashed. In addition, we also use border-width to set the thickness of the border , border-color to set the color of the border, and padding . The inner space between the text and the border. Below are some commonly used border-styles for your reference.

Remarks, please use the color code table to select the border color .

Common CSS border-style style sheet

border-style:solid;	border-style:dotted;	border-style:dashed;
border-style:double;	border-style:outset;	border-style:groove;
border-style:ridge;	border-style:inset;	border-style:none;

The last wording "border-style:none" means that the border is not displayed, and the effect is the same as "border-style: hidden", but in most cases, whether it is a DIV block or a span area, if it is not inherited The styles from the parent layer are not displayed by default. Although all major browsers support the border-style attribute, the above examples may still have some differences in the rendering effect of each browser. It is recommended to use several browsers to test before use.