Borders

How Can We Help?
< All Topics

Borders

Borders in CSS allow you to add visual boundaries around HTML elements. They can enhance the appearance of elements, separate content, and provide a polished look to your web page. Let’s explore various techniques to style borders using CSS.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

  • 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 – Which defines a 3D ridged border. The effect depends on the border-color value
  • inset – Which defines a 3D inset border. The effect depends on the border-color value
  • outset – Which defines a 3D outset border. The effect depends on the border-color value
  • none – Defines no border
  • hidden – Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and left border)

Here’s an example:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Border Width

The border-width property is used to control the width of the border. It can have values like thin, medium, thick, or specific measurements in pixels. For example:

p {
  border-width: 2px;
}

Border Color

The border-color property is used to define the color of the border. You can specify the color using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation. Here’s an example:

h1 {
  border-color: red;
}

button {
  border-color: #336699;
}

Border Radius

The border-radius property allows you to create rounded corners for borders. It can take a value in pixels or percentages to specify the radius of the curve. Here’s an example:

div {
  border-radius: 10px;
}

Shorthand Property

CSS also provides a shorthand property called border that combines border-width, border-style, and border-color into a single declaration. Here’s an example:

button {
  border: 2px solid red;
}

CSS Border Sides

From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

The example above gives the same result as this:

p {
  border-style: dotted solid;
}

So, here is how it works:

If the border-style property has four values:

**border-style: dotted solid double dashed;**
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed

If the border-style property has three values:

**border-style: dotted solid double;**
  • top border is dotted
  • right and left borders are solid
  • bottom border is double

If the border-style property has two values:

**border-style: dotted solid;**
  • top and bottom borders are dotted
  • right and left borders are solid

If the border-style property has one value:

**border-style: dotted;**
  • all four borders are dotted

Example

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

Conclusion

CSS borders offer a range of possibilities to style and customize the edges of HTML elements. By utilizing properties such as border-style, border-width, border-color, border-radius, and the shorthand border property, you can create visually appealing designs with distinct borders. Experiment with different combinations and techniques to achieve the desired effects and enhance the overall aesthetics of your web page.

Table of Contents