CSS Border

CSS Border is a property used to define the style of an element's border.

Borders can be applied to any HTML element to enhance visual effects, separate content, or highlight elements.

CSS border properties mainly include border width, border style, border color, and shorthand properties.

---

CSS border properties

CSS border properties allow you to specify the style and color of an element's border.

---

Border Style

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

border-styleThe property is used to specify the type of border to display.

Allowed values are as follows:

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

border-style demo:

none: Default no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders is the same as the value of border-width

groove: Defines a 3D grooved border. The effect depends on the value of the border color

ridge: Defines a 3D ridged border. The effect depends on the value of the border color

inset: Defines a 3D embedded border. The effect depends on the value of the border color

outset: Defines a 3D outset border. The effect depends on the value of the border color

Try it Yourself »

---

Border Width

You can specify the width of a border using the border-width property.

There are two ways to specify the width of a border: you can specify a length value, such as 2px or 0.1em (with units like px, pt, cm, em, etc.), or use one of the 3 keywords, which are thick, medium (default value), and thin.

Note:CSS does not define the specific widths of the 3 keywords, so one user may set thick, medium, and thin to 5px, 3px, and 2px respectively, while another user may set them to 3px, 2px, and 1px respectively.

---

Border Color

The border-color property is used to set the color of the border. The colors that can be set:

• name - Specifies the name of the color, such as "red"
• RGB - Specify RGB values, such as "rgb(255,0,0)"
• Hex - specifies a hexadecimal value, e.g., "#ff0000"

You can also set the color of the border to "transparent".

Note:border-color alone has no effect; you must first use border-style to set the border style.

---

Borders - Setting each side individually

In CSS, you can specify different borders for different sides:

The above example can also be set with a single property:

The border-style property can have 1-4 values:

• border-style:dotted solid double dashed;
  • Top border is dotted
  • Right border is solid
  • Bottom border is double
  • Left border is dashed
  
  
• border-style:dotted solid double;
  • Top border is dotted
  • Left and right borders are solid
  • Bottom border is double
  
  
• border-style:dotted solid;
  • Top and bottom borders are dotted
  • Right and left borders are solid
  
  
• border-style:dotted;
  • All four borders are dotted

The above example uses border-style. However, it can also be used together with border-width and border-color.

---

Border shorthand property

The above example used many properties to set the border.

You can also set the border in one property.

You can set the following in the "border" property:

• border-width
• border-style (required)
• border-color

---

All border properties in one declaration
This example demonstrates using the shorthand property to set all four border properties in the same declaration.

Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.

Set the width of the left border
This example demonstrates how to set the width of the left border.

Set the color of the four borders
This example demonstrates how to set the color of four borders. One to four colors can be set.

Set the color of the right border
This example demonstrates how to set the color of the right border.

Set gradient border
This example demonstrates how to set gradient borders.

---

CSS border properties

Property	Description
border	A shorthand property used to set the properties for the four sides in one declaration.
border-style	Used to set the style of all borders of an element, or to set border styles for each side separately.
border-width	A shorthand property used to set the width for all borders of an element, or to set widths for each side's border separately.
border-color	A shorthand property that sets the color of the visible parts of all borders of an element, or sets colors for the 4 sides separately.
border-bottom	A shorthand property used to set all properties of the bottom border in one declaration.
border-bottom-color	Sets the color of the bottom border of an element.
border-bottom-style	Sets the style of the bottom border of an element.
border-bottom-width	Sets the width of the bottom border of an element.
border-left	A shorthand property used to set all properties of the left border in one declaration.
border-left-color	Sets the color of the left border of an element.
border-left-style	Sets the style of the left border of an element.
border-left-width	Sets the width of the left border of an element.
border-right	A shorthand property used to set all properties of the right border in one declaration.
border-right-color	Sets the color of the right border of an element.
border-right-style	Sets the style of the right border of an element.
border-right-width	Sets the width of the right border of an element.
border-top	A shorthand property used to set all properties of the top border in one declaration.
border-top-color	Sets the color of the top border of an element.
border-top-style	Sets the style of the top border of an element.
border-top-width	Sets the width of the top border of an element.
border-radius	Sets the border with rounded corners.

other extensions