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.
<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
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.
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)".
<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
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.
<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
Write here.
Write here.
Write here.
