CSS Border

CSS border property is used to specify the style, width, and color of an HTML element's. The HTML element can have four border properties (top, bottom, left, and right).

In this CSS border tutorial, you can learn how to define border thickness and color with one OR all sides of an HTML element.

CSS Border Properties

To define the border of an HTML element there are five border property which can be used according to requirement:

• border-left
• border-right
• border-top
• border-bottom
• border

Syntax for border value

Define border value like border: 'thickness type' 'color':

• Thickness: To define th thickness of border, the value should be define any length unit like px, vw, cm, etc.
• Type: To define which kind of border you want for example solid, dotted, etc.
• Color: To define color of border, color value like, red, blue, #231, etc.

CSS Border Style Types

The border-style property specifies what kind of border to display, list mentioned below:

• dotted: Define a dotted border
• dashed: Define a dashed border
• solid: Define a solid border
• double: Define a double border
• none: Define no border
• hidden: Define a hidden border

CSS Border Style 3D Types

The effect of 3D border depends on the border-color value

• groove: Define a 3D grooved border
• ridge: Define a 3D ridged border
• inset: Define a 3D inset border
• outset: Define a 3D outset border

CSS border-left

div_1 {
  width: 231px;
  height: 231px;
  background-color: #367a06;
  border-left: 5px solid #131132;
}
see with code →

CSS border-right

div_2 {
  width: 232px;
  height: 232px;
  background-color: #423113;
  border-right: 4px dotted red;
}
see with code →

CSS border-top

div_3 {
  width: 233px;
  height: 233px;
  background-color: #231424;
  border-top: 11px solid #134233;
}
see with code →

CSS border-bottom

div_4 {
  width: 235px;
  height: 235px;
  background-color: #c2d;
  border-bottom: 17px solid #342;
}
see with code →

CSS border (All in One)

The border is works for all sides

div_5 {
  width: 236px;
  height: 236px;
  background-color: #367a06;
  border: 7px solid brown;
}
see with code →

CSS border:none

The CSS border NONE remove previous border.

CSS Border Color

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

• name: Define a color name, like 'green'
• Hex: Define a hex value, like '#ffffff'
• RGB: Define a RGB value, like 'rgb(0,0,0)'
• Transparent