The CSS border properties are used to apply border styles to elements.
You can use these properties to specify the style, width, and color of an element's border.
CSS Border properties
Playground Example: To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML and CSS.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom.
CSS border-style
The `border-style` property is utilized to apply a border to an element.
Below is the syntax for adding background color:
Selector {
border-style: value;
}- The selector can be any one or more of those discussed previously in CSS Selectors.
- " border-style" is the property key
- The possible values for "value" include: solid, dotted, dashed, none, hidden, double, groove, ridge, inset, and outset.
Example:
/* border-style */
.solidBorder {
border-style: solid;
}Try changing the value in the playground and observe the border change.
Border Styles | Description |
|---|---|
dotted | Defines a dotted border |
hidden | Hides the current border |
none | Defines no border |
dashed | Defines a dashed border |
solid | Defines a solid border |
double | Defines a double border |
groove | A 3D groove border. The effect depends on the border-color value |
ridge | A 3D ridge border. The effect depends on the border-color value |
inset | A 3D inset border. The effect depends on the border-color value |
outset | A 3D outset border. The effect depends on the border-color value |
CSS border-width
The `border-width` property is used to specify the width of the borders of an element.
Below is the syntax for adding border width:
Selector {
border-width: value;
}The selector can be any one or more of those discussed previously in CSS Selectors.
"border-width" is the property key
"value" is the width
Example:
/* border-width */
.widthStyle {
border-width: 3px;
}Try changing the value in the playground and observe the width of the border change.
CSS border-color
The `border-color` property is used to specify the color of an element's borders.
Below is the syntax for adding border color:
Selector {
border-color: value;
}The selector can be any one or more of those discussed previously in CSS Selectors.
"border-color" is the property key
"value" can be any color
Example:
/* border-color */
.colorStyle {
border-color: red;
}Try changing the value in the playground and observe the color of the border change.
CSS border-radius
The `border-radius` property is used to apply rounded borders to an element.
Below is the syntax for adding border radius:
Selector {
border-radius: value;
}The selector can be any one or more of those discussed previously in CSS Selectors.
"border-radius" is the property key
"value" is the radius
Example:
/* border-radius */
.radiusstyle {
border-radius: 99px;
}Try changing the value in the playground and observe the radius of the border change.
CSS border Shorthand
The shorthand property is used to specify all border properties in a single declaration.
Below is the syntax for adding border shorthand:
Selector {
border: all values;
}The selector can be any one or more of those discussed previously in CSS Selectors.
"border" is the property key
"value" can be a mix of all possible values.
Example:
/* border-shorthand */
.shortHandStyle {
border: 3px solid red;
}Note: Shorthands are very common in CSS, and we will encounter them more often as we move forward.
It will also be a good time to review the previous article, "How to Add CSS in HTML."
Want to practice more? Click here for more hands-on exercise.
References: