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.
hidden	It 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.

Example Try this code »

<!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>
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.
A hidden border.
</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)".

Example Try this code »

<!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>
This is a solid red border
This is a solid green border
</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.

Example Try this code »

<!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>
Write here.
Write here.
Write here.
</body>
</html>