Advertisement

Advertisement


CSS Borders

The border property is used to add a border around the element and these borders can be stylized from different styles, colors, size, etc.

Given below are the different properties which helps in creating an attractive border:

  • Border Style
  • Border Color
  • Border Width
  • Border Radius

Border Style

It specifies the type of border which you want to display on the web page. Look at the table below to see different types of border styles.

Value Description
none It doesn't show any border.
dotted It shows a dotted border.
dashed It shows a dashed border.
solid It shows a solid border.
double It shows two borders of equal width.
groove It displays a 3d grooved border.
ridge It displays a 3d ridged border. .
inset It displays a 3d inset border.
outset It displays a 3d outset border.
hiddenIt defines a hidden border. This border exists but doesn't display.

The border-style property can be given separately for each side of the element:border-top, border-right, border-bottom and border-left. It can also be given by shorthand property, like border-style: double solid dashed dotted; for top, right, bottom, left borders respectively.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Border </title>
<meta charset="UTF-8">
<style>
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
</style>
</head>
<body>
<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="none">No border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>

Output

CSS 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.

No border.


Border Color

The color can be specified by three ways:

  • Name: Directly color name is specified. For example: "blue".
  • Hex: The hex value of the color is given. For example: "#fff256".
  • RGB: The RGB value of the color is given. For example: "rgb(170,255,100)".

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Border Color </title>
<meta charset="UTF-8">
<style>
.color1 {
border-style: solid;
border-color: red blue yellow green;
}
.color2 {
border-style: solid;
border-color: #98bf21 yellow orange brown;
}
</style>
</head>
<body>
<p class="color1">This is a solid red border</p>
<p class="color2">This is a solid green border</p>
</body>
</html>

Output

CSS Border Color

This is a solid red border

This is a solid green border


Border Width

The border-width is used to set the width of the border. It can be set in pre-defined values like thin, medium, thick or in pixels.

It can also be given by shorthand property, like border-width: 1px 5px 4px 5px; for top, right, bottom, left borders respectively.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Border Width </title>
<meta charset="UTF-8">
<style>
.width1 {
border-style: solid;
border-width: medium;
padding: 5px;
}
.width2 {
border-style: solid;
border-width: 5px;
padding: 5px;
}
width3 {
border-style: solid;
border-width: 2px;
padding: 5px;
}
</style>
</head>
<body>
<p class="width1">Write here.</p>
<p class="width2">Write here.</p>
<p class="width3">Write here.</p>
</body>
</html>

Output

CSS Border Width

Write here.

Write here.

Write here.











Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.