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: 20px; /* Space between cell borders */
}

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.