There are following border properties defined below:
1) There is a property named as border-color
This property is used for specify the different colors of border which are
explained below.
2) There is another property named as border-style
There are many styles for border like solid,dashed or dotted etc. which are
also explained below.
3) There is another property named as border-width
This property is used to specify different width to border which are also
explained below.
These all properties are defined and explained below with example and
source code.Hope you will enjoy it.
The border-color
<style type="text/css">
.d-1{
border-color: #4d0000;
border-style: solid;
}
.d-2{
border-color: #0000b3;
border-style: dashed;
}
.d-3{
border-color: #ff1a75;
border-style: dotted;
}
</style>
<div class="d-1">This is div 1</div>
<div class="d-2">This is div 2</div>
<div class="d-3">This is div 3</div>
Output of above code
This is div 1
This is div 2
This is div 3
The border-style
There are following style properties for border-style.
1) hidden - This style is used for hidden border
2) dotted - This style is used for dotted border
3) solid - This style is used for solid border
4) dashed - This style is used for dashed border
5) double - This style is used for double border
6) groove - This style is used for 3D groove border
7) ridge - This style is used for 3D ridge border
8) inset - This style is used for 3D inset border
9) outset - This style is used for 3D outset border
10) none - This style is used for no border
Eample of border styles
<style type="text/css">
.d-1{
border-color: red;
border-style: hidden;
}
.d-2{
border-color: red;
border-style: dotted;
}
.d-3{
border-color: red;
border-style: solid;
}
.d-4{
border-color: red;
border-style: dashed;
}
.d-5{
border-color: red;
border-style: double;
}
.d-6{
border-color: red;
border-style: groove;
}
.d-7{
border-color: red;
border-style: ridge;
}
.d-8{
border-color: red;
border-style: inset;
}
.d-9{
border-color: red;
border-style: outset;
}
.d-10{
border-color: red;
border-style: none;
}
</style>
<div class="d-1">hidden border style</div>
<div class="d-2">dotted border style</div>
<div class="d-3">solid border style</div>
<div class="d-4">dashed border style</div>
<div class="d-5">double border style</div>
<div class="d-6">groove border style</div>
<div class="d-7">ridge border style</div>
<div class="d-8">inset border style</div>
<div class="d-9">outset border style</div>
<div class="d-10">none border style</div>
Output of above code
hidden border style
dotted border style
solid border style
dashed border style
double border style
groove border style
ridge border style
inset border style
outset border style
none border style
The border-width
<style type="text/css">
.w-1{
border-color: #4d0000;
border-style: solid;
border-width: 5px;
}
.w-2{
border-color: #0000b3;
border-style: dashed;
border-width: medium;
}
.w-3{
border-color: #ff1a75;
border-style: dotted;
border-width: thick;
}
</style>
<div class="w-1">This is div 1</div>
<div class="w-2">This is div 2</div>
<div class="w-3">This is div 3</div>
Output of above code
This is div 1
This is div 2
This is div 3
Border shorthand properties
border: border-width border-style border-color;
<style type="text/css">
.d-1{
border: 5px solid green;
}
</style>
<div class="d-1">This is div 1</div>
Output of above code
This is div 1
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
