CSS border is used to give the border for html element. This is a shorthand property to give border with a single setting to specify the width, style and color of border. This property will give borders to all the sides of an HTML element.
Syntax
|
1 |
border: border-width border-style border-color; |
Example
|
1 2 3 4 5 6 7 8 |
<style> .div-border{ border:1px solid red; } </style> <div class="div-border"> <p>This is the paragraph to show HTML border example. This will give border the all the sides of this div. The color of border is red. This border property has given here to display border.</p> </div> |
Output
This is the paragraph to show HTML border example. This will give border the all the sides of this div. The color of border is red. This border property has given here to display border.
CSS border values list
The values and description of this property is used for border. This is used to display the border for the HTML element.
| Sr. No. | value | Description |
|---|---|---|
| 1 | border-width | Used to give width of border. The value for this is in px. Check CSS border-width for more detail. |
| 2 | border-style | Used to give style for border. The value for this can be from none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Check CSS border-style for more detail. |
| 3 | border-color | Used to give color for border. The value for this can be hex color, rbga() and color label. Check CSS border-color for more detail. |
| 6 | initial | Used to define as the property initial value. |
| 7 | inherit | Used to define the computed value of property on the elements parent. |
CSS border dotted
In this example we will use to show dotted border-bottom. This is the steling of the border looks like a dash to all the sides.
|
1 2 3 4 5 6 7 8 |
<style> .div-border-dotted{ border:1px dotted red; } </style> <div class="div-border-dotted"> <p>This is the paragraph to show HTML border example. This will give border the all the sides of this div. The color of border is red. This border property has given here to display border.</p> </div> |
Output
This is the paragraph to show HTML border example. This will give border the all the sides of this div. The color of border is red. This border property has given here to display border.