A border is rectangular line drawn along the 4 sides of an element.
CSS can add borders with different styles to each side of an element.
Customizable border properties include color, width, style, and radius.
An <input> element with a custom border.
<input type="text" placeholder="Your email.."
style="border:5px solid lightseagreen;">
The CSS border property is a shorthand syntax that defines multiple border properties.
This property sets the border-width, border-style, and border-color.
The border property is useful when setting the same border style for all 4 sides.
The syntax for adding a border.
border: border-width border-style border-color
border-width - sets the thickness of the borderborder-style - sets a border style: solid, double line, dashed, or othersborder-color - sets the border color. If not specified it inherits the parent's colorAn element with a border.
<style>
.bordered {
padding: 20px;
border: 5px solid firebrick;
}
</style>
<div class="bordered">
Text inside a bordered container.
</div>
border-style value can also be placed before the border-width value.CSS supports separate properties that define these border characteristics. They are: border-color, border-width, and border-style. We'll review these next.
The border-color property defines the border color.
This property accepts up to four values, one for each side.
The border-color property accepts any of the following color values:
| Value | Description |
|---|---|
color name |
A built-in color name, like 'yellow' or 'orangered' |
HEX |
A HEX value, like "#ff3e00" |
RGB / RGBA |
An RGB(A) value, like "rgb(255,43,0)" |
HSL / HSLA |
An HSL(A) value, like "hsl(0,75%,100%)" |
transparent |
Sets the color to transparent (not visible). |
A border assigned with the border-color property.
<style>
.red-border {
border-style: solid;
border-color: orangered;
padding: 20px;
}
</style>
<div class="red-border">
A border with a border-color
</div>
For details on border-color, see our CSS border-color property reference.
The border-width property sets the border width.
This property value can be any length value such as px, pt, cm, and em.
Or they can be set with pre-defined keywords: thin, medium, or thick.
It accepts one to four values for the top, right, bottom, and left side.
| Value | Description |
|---|---|
thin |
Thin border |
medium |
Default. Medium border |
thick |
Thick border |
length |
Sets thickness with CSS units: px, pt, em, etc. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Click the buttons to see the different border-width values.
<style>
.border-width-example {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: thick;
}
</style>
<div class="border-width-example">
border-width: thick
</div>
For details on border-width, see our CSS border-width property reference.
The border-style property sets the line style: solid, dotted, dashed, etc.
Each side of the element can have their own style.
This property is required to display a border.
These are possible border style values.
| Value | Description |
|---|---|
dotted |
Defines a dotted border |
dashed |
Defines a dashed border |
solid |
Defines a solid border |
double |
Defines a double border |
groove |
Defines a 3D grooved border. The effect depends on the border-color value |
ridge |
Defines a 3D ridged border. The effect depends on the border-color value |
inset |
Defines a 3D inset border. The effect depends on the border-color value |
outset |
Defines a 3D outset border. The effect depends on the border-color value |
none |
Defines no border |
hidden |
Defines a hidden border |
Click the buttons to see the different border-style values.
<style>
.border-example {
padding: 20px;
border-width: 5px;
border-color: firebrick;
border-style: dotted;
}
</style>
<div class="border-example">
border-style: dotted
</div>
For details on border-style, see our CSS border-style property reference.
Borders can appear opaque (or transparent).
The border-color property accepts colors with opacity.
This element has a border with an opaque RGBA color.
<style>
.border-opacity {
padding: 30px;
border: 12px solid rgba(48, 46, 163, .2);
}
</style>
<div class="border-opacity">
A border with 20% opacity (80% transparency).
</div>
Each side of an element can have a different border.
The border property on each side is specified with these properties:
An element with a different border on each side.
<style>
.each-border {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
border-color: rebeccapurple;
border-width: 5px;
padding: 25px;
}
</style>
<div class="each-border">
Different border styles for each side.
</div>
Both border: 0 and border: none remove the element's border.
Both approaches are correct, but the internal implementations are different.
The border: 0 sets the border-width to 0.
The border: none sets the border-style to none.
In practice, border: 0 is shorter and is more often used.
The border-radius property adds rounded borders to an element.
It accepts any length value including percentages.
Setting the border-radius value to 50% applies a circular effect onto the element.
Here are three elements with different border radius values.
<style>
.rounded-border {
margin: 10px 0;
padding: 25px;
border: 5px solid steelblue;
}
.round {
border-radius: 10px;
}
.rounder {
border-radius: 20px;
}
.roundest {
border-radius: 30px;
}
</style>
<div class="rounded-border round">Round border</div>
<div class="rounded-border rounder">Rounder border</div>
<div class="rounded-border roundest">Roundest border</div>
For details on border-radius, see our CSS border-radius property reference.
A complete list with border properties.
| Property | Description |
|---|---|
| border | Sets all the border properties in one declaration |
| border-bottom | Sets all the bottom border properties in one declaration |
| border-bottom-color | Sets the color of the bottom border |
| border-bottom-style | Sets the style of the bottom border |
| border-bottom-width | Sets the width of the bottom border |
| border-color | Sets the color of the four borders |
| border-left | Sets all the left border properties in one declaration |
| border-left-color | Sets the color of the left border |
| border-left-style | Sets the style of the left border |
| border-left-width | Sets the width of the left border |
| border-radius | Sets all the four border-*-radius properties for rounded corners |
| border-right | Sets all the right border properties in one declaration |
| border-right-color | Sets the color of the right border |
| border-right-style | Sets the style of the right border |
| border-right-width | Sets the width of the right border |
| border-style | Sets the style of the four borders |
| border-top | Sets all the top border properties in one declaration |
| border-top-color | Sets the color of the top border |
| border-top-style | Sets the style of the top border |
| border-top-width | Sets the width of the top border |
| border-width | Sets the width of the four borders |