CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border Width
The border-width property specifies the width of the four borders. The property can have from one to four values.
div {
border-width: 10px;
}
In this example, all four borders will be 10px wide.
Border Style
The border-style property specifies what kind of border to display. The property can have from one to four values (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden).
div {
border-style: solid;
}
In this example, all four borders will be solid.
Border Color
The border color property sets the color of an element's four borders. The property can have from one to four values.
div {
border-color: red;
}
In this example, all four borders will be red.
Border - Individual Sides
You can set the border on individual sides of an element:
div {
border-left: 6px solid red;
border-right: 6px solid blue;
}
In this example, the element will have a 6px solid red border on the left side and a 6px solid blue border on the right side.
Shorthand Property: border
The border
property is a shorthand property for border-width
, border-style
(required), and border-color
.
div {
border: 5px solid red;
}
In this example, all four borders will be 5px wide, solid and red.
Border Radius
The border radius property is used to add rounded borders to an element:
div {
border: 2px solid;
border-radius: 25px;
}
In this example, the element will have a 2px solid border with a 25px radius, making it rounded.
Border Collapse
The border-collapse property is specifically used for table elements. It controls how table borders collapse into a single border when adjacent cells have borders:
collapse: Borders collapse into a single border (default behavior).
separate: Borders remain separate.
table {
border-collapse: collapse; /* Borders collapse into one */
}
Border Spacing
The border-spacing property sets the space between adjacent cell borders in a table:
table {
border-spacing: 10px; /* Space between cell borders */
}
Top comments (0)