CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below
- border-style
- border-color
- border-width
- border-radius
1) CSS border-style
The Border style property is used to specify the border type which you want to display on the web page.
There are some border style values which are used with border-style property to define a border.
| Value | Description |
|---|---|
| none | It doesn’t define any border. |
| dotted | It is used to define a dotted border. |
| dashed | It is used to define a dashed border. |
| solid | It is used to define a solid border. |
| double | It defines two borders wIth the same border-width value. |
| groove | It defines a 3d grooved border. effect is generated according to border-color value. |
| ridge | It defines a 3d ridged border. effect is generated according to border-color value. |
| inset | It defines a 3d inset border. effect is generated according to border-color value. |
| outset | It defines a 3d outset border. effect is generated according to border-color value. |
Output:
No border.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
2) CSS border-width
The border-width property is used to set the border’s width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.
Note: The border-width property is not used alone. It is always used with other border properties like “border-style” property to set the border first otherwise it will not work.
3) CSS border-color
There are three methods to set the color of the border.
- Name: It specifies the color name. For example: “red”.
- RGB: It specifies the RGB value of the color. For example: “rgb(255,0,0)”.
- Hex: It specifies the hex value of the color. For example: “#ff0000”.
There is also a border color named “transparent”. If the border color is not set it is inherited from the color property of the element.
Note: The border-color property is not used alone. It is always used with other border properties like “border-style” property to set the border first otherwise it will not work.