Categories
CSS Web development

CSS border-style Property

CSS border-style Property

The CSS border-style property settles the style of an element’s four borders.

Demo:

The CSS border-style property can have from one to four values.

Each side of the border (top, right, bottom, left) can have a different style.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.one {
border-style: dotted solid dashed double;
}

</style>
</head>
<body>

<h4 class="one">This is a heading.</h4>

</body>
</html>

Output:

This is a heading.

Syntax:

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

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example2:

Set different borders on each side of an element:

<!DOCTYPE html>
<html>
<head>
<style>
.a {border-style: solid dotted dashed double;}
.b {border-style: solid dotted dashed;}
.c {border-style: solid dotted;}
.d {border-style: solid;}
</style>
</head>
<body>

<h4 class="a">This is a heading.</h4>
<h4 class="b">This is a heading.</h4>
<h4 class="c">This is a heading.</h4>
<h4 class="d">This is a heading.</h4>

</body>
</html>

Output:

This is a heading.

This is a heading.

This is a heading.

This is a heading.

Enjoy coding!

Read also:

CSS border Property

CSS border-color Property