CSS Borders

In CSS, theborder-styleproperty is used to specify the style of an element’s border. Theborder-styleproperty can take one of the following values:

1. none: no border is drawn.
2. solid: a solid line border is drawn.
3. dotted: a series of dots is drawn as the border.
4. dashed: a series of dashes is drawn as the border.
5. double: two solid lines are drawn as the border.
6. groove: a 3D grooved border is drawn.
7. ridge: a 3D ridged border is drawn.
8. inset: a 3D inset border is drawn.
9. outset: a 3D outset border is drawn.

Here is an example CSS code that demonstrates the use of theborder-styleproperty:

.border {
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

.dotted-border {
  border-style: dotted;
  border-width: 2px;
  border-color: red;
}

.dashed-border {
  border-style: dashed;
  border-width: 3px;
  border-color: blue;
}

.groove-border {
  border-style: groove;
  border-width: 4px;
  border-color: green;
}

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

The border-color property is used to set the color of the four borders.

The color can be set by:

name – specify a color name, like “red”
HEX – specify a HEX value, like “#ff0000”
RGB – specify a RGB value, like “rgb(255,0,0)”
HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
transparent
Note: If border-color is not set, it inherits the color of the element.

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

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 CSS border shorthand property is used to specify all the border properties in one line. It is written in the following order:

border: [border-width] [border-style] [border-color];

For example, if you want to set a border with a width of 2px, a solid style, and a black color, you can use the following shorthand property:

border: 2px solid black;

You can also specify individual values for each property using the longhand properties:

• border-width: specifies the width of the border in pixels, ems, rems, or other units.
• border-style: specifies the style of the border, such as solid, dashed, dotted, double, groove, ridge, inset, or outset.
• border-color: specifies the color of the border.

Here’s an example of how to set each individual property using longhand notation:

border-width: 2px;
border-style: solid;
border-color: black;

Note that you can also set each individual border side using the longhand properties. For example, to set the left border to be red with a width of 2px and a solid style, you can use the following code:

border-left: 2px solid red;

The border-radius property is used to add rounded borders to an element:

p {
  border: 2px solid red;
  border-radius: 5px;
}