CSS Border

by

To set the border on an HTML element, the CSS Border is used. To define the style, color, and size of the border of an HTML element, the CSS border properties are used.

CSS border properties:

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

CSS border-style:

To define the border type the Border style property is used.

Values used with border-style property to define a border:

Value Uses
none Used to not specify any border.
dotted Used to specify a dotted border.
dashed Used to specify a dashed border.
solid Used to specify a solid border.
double Used to specify two borders with the same border-width value.
groove Used to specify a 3d grooved border as per the border-color value.
ridge Used to specify a 3d ridged border as per the border-color value.
inset Used to specify a 3d inset border as per the border-color value.
outset Used to specify a 3d outset border as per the border-color value.

 

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;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property with different values.</h2>
<p class="dotted">Hello World!!</p>
<p class="dashed">Hello World!!</p>
<p class="solid">Hello World!!</p>
<p class="double">Hello World!!</p>
<p class="groove">Hello World!!</p>
<p class="ridge">Hello World!!</p>
<p class="inset">Hello World!!</p>
<p class="outset">Hello World!!</p>
<p class="none">Hello World!!</p>
<p class="hidden">Hello World!!</p>
<p class="mix">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are displaying the use of the CSS border-style property with different values.

CSS border-width:

To set the border’s width in pixels the border-width property is used. To set the width of the border, there are three predefined values, thin, medium, or thick.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 10px;
}
p.two {
border-style: solid;
border-width: thick;
}
p.three {
border-style: dotted;
border-width: 5px;
}
p.four {
border-style: dotted;
border-width: thin;
}
p.five {
border-style: double;
border-width: 10px;
}
p.six {
border-style: double;
border-width: medium;
}
p.seven {
border-style: solid;
border-width: 5px 2px 5px 10px;
}
</style>
</head>
<body>
<h2>The border-width Property with different values.</h2>
<p class="one">Hello World!!</p>
<p class="two">Hello World!!</p>
<p class="three">Hello World!!</p>
<p class="four">Hello World!!</p>
<p class="five">Hello World!!</p>
<p class="six">Hello World!!</p>
<p class="seven">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are displaying the use of the CSS border-width property with different values.

CSS border-color:

To set the color of the border the CSS border-color property is used.

  • Name: It is used to define the color name.
  • RGB: It is used to define the RGB value of the color.
  • Hex: It is used to define the hex value of the color.

We can also set the border color to “transparent”. The border color is inherited from the color property of an HTML element if it is not set. The border-color property is always used with other border properties.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: dotted;
border-color: red;
}
p.two {
border-style: solid;
border-color: yellow;
}
p.three {
border-style: solid;
border-color: red blue yellow green;
}
</style>
</head>
<body>
<h2>The border-color Property with different values</h2>
<p class="one">Hello World!!</p>
<p class="two">Hello World!!</p>
<p class="three">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are displaying the use of the CSS border-color property with different values.