CSS Border Properties
In CSS, the CSS border properties are applied to set the border on an element. There are four types of CSS border properties, which are given below
- border-style
- border-color
- border-width
- border-radius
1. CSS border-style
The main purpose of border-style to specify the border type, in which to design your web page. There are many different border style values, which is given below:
- dotted,
- double,
- none,
- hidden,
- solid,
- dashed,
- inset,
- outset,
- groove, and
- ridge
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {border-style: dotted;}
.bor-test2 {border-style: dashed;}
.bor-test3 {border-style: solid;}
.bor-test4 {border-style: double;}
.bor-test5 {border-style: groove;}
.bor-test6 {border-style: ridge;}
.bor-test7 {border-style: inset;}
.bor-test8 {border-style: outset;}
.bor-test9 {border-style: none;}
.bor-test10 {border-style: hidden;}
</style>
</head>
<body>
<p class="bor-test3">A solid border style.</p>
<p class="bor-test">A dotted border style.</p>
<p class="bor-test2">A dashed border style.</p>
<p class="bor-test4">A double border style.</p>
<p class="bor-test5">A groove border style.</p>
<p class="bor-test6">A ridge border style.</p>
<p class="bor-test">No border style.</p>
<p class="bor-test9">A hidden border style.</p>
<p class="bor-test7">An inset border style.</p>
<p class="bor-test8">An outset border style.</p>
</body>
</html>
Output
A solid border style.
A dotted border style.
A dashed border style.
A double border style.
A groove border style.
A ridge border style.
No border style.
An inset border style.
An outset border style.
Border-width property
Basically we use the border-width property to describe the thickness or width of the border area. The border-width define in pixels format.
Let’s see the given example to understand how border-width property works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
border-style: dashed;
border-width: 15px;
}
</style>
</head>
<body>
<p class="bor-test">A dashed border style and the width of the border is 15 pixels.</p>
</body>
</html>
Output
A dashed border style and the width of the border is 15 pixels.
CSS border-color
There are mainly three technique such as Name(red), RGB(rgb(255,0,0) and Hex(#ff0000)for define the border-color to the border area.
Let’s see the given example to understand how border-color property works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
border-style: solid;
border-color: orange;
}
.bor-test1 {
border-style: dashed;
border-color: #ccccc;
}
</style>
</head>
<body>
<p class="bor-test">A solid border style and the color of the border is orange.</p>
<p class="bor-test1">A dashed border style and the color of the border is grey.</p>
</body>
</html>
Output
A solid border style and the color of the border is orange.
A dashed border style and the color of the border is grey.
The Border Shorthand Property
If you want short your code line then you can combine all three properties border-style, border-color and border-width in single line or rule. It work same.
Let’s see the given example to understand how Shorthand property works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
border: 5px solid green;
}
</style>
</head>
<body>
<p class="bor-test">A Border Shorthand Property in single line.</p>
</body>
</html>
Output
A Border Shorthand Property in single line.