How to set the border style in css

This article is about how to style borders in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

One: the basic style of border border lines

Border style properties specify what boundaries to display

1.border-style attribute

None: no border by default

Dotted: define a dotted border

Dashed: define a dashed border

Solid: define solid border

Double: defines two borders. The width of both borders is the same as the value of border-width

Groove: defines a 3D groove border. 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 embedded border. The effect depends on the color value of the border.

Outset: defines a 3D highlight border. The effect depends on the color value of the border.

Border-style attribute

.demo {width:500px;height:500px;margin:50pxauto;}

P.none {border-style:none;}

P.dotted {border-style:dotted;}

P.dashed {border-style:dashed;}

P.solid {border-style:solid;}

P.double {border-style:double;}

P.groove {border-style:groove;}

P.ridge {border-style:ridge;}

P.inset {border-style:inset;}

P.outset {border-style:outset;}

P.hidden {border-style:hidden;}

No borders.

Dotted border.

Dotted border.

Solid border.

Double-sided box.

Grooved frame.

Ridge border.

Embed the border.

Convex border.

Hide the border.

Effect picture:

Thank you for reading! This is the end of the article on "how to set the frame style in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!