The CSS border properties allow you to specify the style, width, and color of an element’s border.

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 - 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

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

example,

See the Pen css border 1 by Arpit (@soniarpit) on CodePen.

CSS Border Width

border-width property defines the width of the border.

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

See the Pen border width by Arpit (@soniarpit) on CodePen.

CSS Border Color

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.

See the Pen border color by Arpit (@soniarpit) on CodePen.

Specific Side Colors

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

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

CSS Border - Individual Sides

You can noticed in previous example that all sides has same style of border.

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

See the Pen border side by Arpit (@soniarpit) on CodePen.

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

try this 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;
}

CSS Border - Shorthand Property

Instead of writing all value separately you can write like this,

example1

p {
  border: 5px solid red;
}

example2,

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

CSS Rounded Borders

border-radius property allows us make border rounded.

See the Pen border radius by Arpit (@soniarpit) on CodePen.

Previous: Manipulating Texts and Fonts

Next: CSS Margins