CSS border
In CSS we can also set the styling for the border of our element by using the border properties.
Let's understand these peoperties one-by-one.
Border-style
This allows you to select the style of border which you want to display .
Some of the values are as follows explained in the program :-
<!DOCTYPE html>
<html>
<head>
<style>
.firstborder{
border-style:dotted;
}
.secondborder{
border-style:dashed;
}
.thirdborder{
border-style:solid;
}
.forthborder{
border-style:double;
}
.fifthborder{
border-style:groove;
}
.sixthborder{
border-style:ridge;
}
.seventhborder{
border-style:inset;
}
.eightborder{
border-style:outset;
}
.ninthborder{
border-style:none;
}
.tenthborder{
border-style:hidden;
}
</style>
</head>
<body>
<p class="firstborder">firstborder </p>
<p class="secondborder">secondborder </p>
<p class=" thirdborder">thirdborder </p>
<p class="forthborder"> forthborder</p>
<p class="fifthborder">fifthborder </p>
<p class="sixthborder">sixthborder </p>
<p class="seventhborder">seventhborder </p>
<p class="eightborder">eightborder </p>
<p class="ninthborder">ninthborder </p>
<p class=" tenthborder">tenthborder </p>
</body>
</html>
Output of the Program
dotted border
dashed border
solid border
double border
groove border
ridge border
inset border
outset border
none border
hidden border
Here in the above program dotted, dashes , solid , double, groove, ridge, inset, outset, none and hidden are the values.
Let's understand what these values are responsible for:-
Values | Description |
dotted | Defines a dotted border |
dashed | Defines a dashed border |
solid | Defines a solid border |
double | Defines a double border |
groove | Defines a groove border |
ridge | Defines a ridge border |
inset | Defines a inset border |
outset | Defines a outset border |
none | Defines a none border |
hidden | Defines a hidden border |
Border-width
This allows you to adjust the width of border which you want to display .
We can set this width by using the following values:-
- thin
- thick
- medium
- length(in pt px cm etc.)
Before providing the border-width property we must set the border-style-property first.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style:solid;
border-width:5px;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the border-width of 5px in the paragraph. And here we can also set the values to thin, thick, medium etc.
Border-color
This allows you to change the color of the border which you want to display .
We can set this color by using the following values:-
- color name
- Hex values (#ff0000)
- RGB values "rgb(255,0,0)"
- transparent
Before providing the border-color property we must set the border-style-property first.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
.red{
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p class="red"> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the border-color of red in the paragraph. And here we can also set the values to RGB, Hex values,transparent etc.
Border
This allows you to change the style,width and color property of the border in a single line which you want to display .
Order of writing background shorthand property
- border-width
- border-style(important)
- border-color
And the same above order we have to follow if we want to use background shorthand property, we can also omit the properties if we
want but the order again will be same and the background-style property is very must.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 5px solid green;
}
</style>
</head>
<body>
<p>I am Manish </p>
<p> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the border-size, border-style and border-color by specifying these
properties in single line.
Some more border properties in CSS
Property | Description |
border | Sets all the border properties in one declaration |
border-bottom | Sets all the bottom border properties in one declaration |
border-bottom-color | Sets the color of the bottom border |
border-bottom-style | Sets the style of the bottom border |
border-bottom-width | Sets the width of the bottom border |
border-color | Sets the color of the four borders |
border-left | Sets all the left border properties in one declaration |
border-left-color | Sets the color of the left border |
border-left-style | Sets the style of the left border |
border-left-width | Sets the width of the left border |
border-radius | Sets all the four border-*-radius properties for rounded corners |
border-right | Sets all the right border properties in one declaration |
border-right-color | Sets the color of the right border |
border-right-style | Sets the style of the right border |
border-right-width | Sets the width of the right border |
border-style | Sets the style of the four borders |
border-top | Sets all the top border properties in one declaration |
border-top-color | Sets the color of the top border |
border-top-style | Sets the style of the top border |
border-top-width | Sets the width of the top border |
border-width | Sets the width of the four borders |