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>

Output

CSS Border Width

Write here.

Recommended :

1 . How float work in CSS ?
2 . Adding Links To Your HTML Code
3 . How to Change the Font With CSS ?
4 . CSS Box Model work

5 . How to make tooltip more Interactive using CSS
6 . How to use animation in CSS
7 . Create Bootstrap 4 Spinner
8 . Photography Snippets using HTML and CSS

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors