CSS Borders

web development

Saturday 3 April 2021

Hacker

web development

CSS Borders

❮❮ Previous Next ❯❯

The CSS border properties allow we to specify how the border of the box representing an element should look.

CSS borders

There are three properties of a border we can change −

border-color : The border-color specifies the color of a border.

border-style : The border style specifies whether a border should be solid, dashed line, double line, dotted or one of the other possible values.

border-width :The border-width specifies the width of a border.

The CSS border properties allow we to specify the style, width, and color of an web element's border.

Now Let's see, how we will use these properties with examples.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid blue border</p>
<p class="two">This is a solid green border</p>
</body>
</html>

Try it Yourself »

CSS Border Style

The border style property specifies what kind of border to display.
The following values are allowed:

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. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

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

the top border
right border
bottom border
the left border.

Example

Demonstration of the different border styles:

<!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>

Try it Yourself »

Note: The OTHER CSS border properties, you will learn more about in the next chapters.

Example

<!DOCTYPE html>
<html>

<head>
<style>
p.dotted {
border-style: dotted;
}

p.dashed {
border-style: dashed;
}

p.solid {
border-style: solid;
}

p.double {
border-style: double;
}
</style>
</head>

<body>

<h2>The border-style Property</h2>
<p>Geeksforgeeks</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>

</body>

</html>