In this tutorial you will learn about the CSS Borders and its application with practical example.
CSS Borders allow us to completely customize the appearance of the borders that appear around HTML Elements. CSS Border properties gives us way to specify the width,style and color of an HTML Element’s border.We use the border-width, border-style, and border-color properties.
| Property | Description |
|---|---|
| border-width | This property specifies thickness of your border for the HTML Element. |
| border-style | This property specifies colors for the border can be any color defined by RGB, hexadecimal, or key terms. |
| border-color | This property specifies what style of border to display for the HTML Element. Example – none,solid,dotted,dashed,double,groove,ridge,inset,outset and hidden |
Border Style
The border-style property specifies what style of border to display.Borders can have the following possible style values
none,solid,dotted,dashed,double,groove,ridge,inset,outset and hidden
Example Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<p style="border-width:4px; border-style:none;"> This is a border with none width. </p> <p style="border-width:4px; border-style:solid;"> This is a solid border. </p> <p style="border-width:4px; border-style:dashed;"> This is a dahsed border. </p> <p style="border-width:4px; border-style:double;"> This is a double border. </p> <p style="border-width:4px; border-style:groove;"> This is a groove border. </p> <p style="border-width:4px; border-style:ridge"> This is aridge border. </p> <p style="border-width:4px; border-style:inset;"> This is a inset border. </p> <p style="border-width:4px; border-style:outset;"> This is a outset border. </p> <p style="border-width:4px; border-style:hidden;"> This is a hidden border. </p> |
Output:
This is a border with none width.
This is a solid border.
This is a dahsed border.
This is a double border.
This is a groove border.
This is aridge border.
This is a inset border.
This is a outset border.
Borders for Each Side
In CSS we can specify different borders properties for four different sides:
| Side | Properties |
|---|---|
| Bottom | border-bottom-color border-bottom-style border-bottom-width |
| Left | border-left-color border-left-style border-left-width |
| Right | border-right-color border-right-style border-right-width |
| Top | border-top-color border-top-style border-top-width |
Example Code:
|
1 2 3 4 5 6 7 |
<p style="border-width:4px; border-top-style:solid; border-bottom-style:dashed; border-left-style:groove; border-right-style:double;"> This is a a border with four different styles. </p> |
This is a a border with four different styles.
Border Shorthand property
We can specify all the individual border properties in one property. This is called a shorthand property.
Syntax:
|
1 |
border:border-width border-style border-color; |
Example Code:
|
1 |
border:5px solid red; |
