CSS Border

The border properties is used to how the border of the box representing an element should look.

There are some border properties used in CSS.

border-style
border-color
border-width
border-radius

1) CSS border-style

border-style property is used to border type which you want to display on the web page.

The border-style Property.

Value	Description
none	No border.
dotted	Display a dotted border.
dashed	Dispaly dashed border.
solid	Display solid border.
double	Two lines borders.
groove	3D grooved border. according to border-color value.
ridge	It defines a 3d ridged border. according to border-color value.
inset	It defines a 3d inset border. according to border-color value.
outset	It defines a 3d outset border. according to border-color value.

Use Shorthand Combinations Property

border	border-color	border-style	border-width
border-top	border-top-color	border-top-style	border-top-width
border-bottom	border-bottom-color	border-bottom-style	border-bottom-width
border-left	border-left-color	border-left-style	border-left-width
border-right	border-right-color	border-right-style	border-right-width

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>

Test it Now

Output:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

2) CSS border-width

border-width property is used to set the border's width.

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}
p.three {
    border-style: solid;
    border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write some text here.</p>
<p class="two">Write some text here.</p>
<p class="three">Write some text here.</p>
</body>
</html>

Test it Now

Next TopicCSS Margin

← prev next →

CSS Tutorials

CSS Properties

CSS Border

There are some border properties used in CSS.

1) CSS border-style

Use Shorthand Combinations Property

2) CSS border-width