CSS Border
The following CSS border codes demonstrate the various CSS properties you can use to apply styles to the border of any HTML element.
CSS allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element.
Setting Borders on all Sides
To set border styles for all sides of an element, you use the border-width, border-style, and border-color properties. You can also use the border property to set all properties at once.
border-width, border-style, and border-color
| Code | Result |
|---|---|
|
|
This text has border styles applied using the border-width, border-style, and border-color properties. |
The border Property
The border property is shorthand for setting border-width, border-style, and border-color.
| Code | Result |
|---|---|
|
|
This text has border styles applied using the border property. |
Border Styles
Borders can have the following styles.
| Code | Result |
|---|---|
|
|
This text has a border style of 'solid'. This text has a border style of 'dotted'. This text has a border style of 'dashed'. This text has a border style of 'double'. This text has a border style of 'groove'. This text has a border style of 'ridge'. This text has a border style of 'inset'. This text has a border style of 'outset'. |
Setting Borders for Each Side
If you don't want the border settings to be applied to all four sides, or if you want each side to have different styles applied, you can use the following properties:
Explicit Properties
border-bottom-colorborder-bottom-styleborder-bottom-widthborder-left-colorborder-left-styleborder-left-widthborder-right-colorborder-right-styleborder-right-widthborder-top-colorborder-top-styleborder-top-width
Example:
| Code | Result |
|---|---|
|
|
This text has a bottom border. |
Shorthand Properties
The following properties provide you with a more concise way of specifying border properties for each side.
Example:
| Code | Result |
|---|---|
|
|
This text has a bottom border. |

