CSS Borders

CSS borders property changes the border style, border width, and border color. The border of any HTML element exists between the margin and padding of that element.

Border shorthand property-border:border style border width border color;

CSS Border Style

CSS border style is used to assign different predefined border style.It has the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge.

CSS Border Style Description

dotted - It defines a dotted border around the element's border.
dashed - It defines a dashed border around the element's border.
solid - It defines a solid border around the element's border.
ridge - It defines a 3D ridged border around the element's border.
double - It defines a double border around the element's border.
groove - It defines a 3D grooved border around the element's border.
inset - It defines a 3D inset border around the element's border.
hidden - It defines a hidden border around the element's border.
outset - It defines a 3D outset border around the element's border.
none - It defines no border around the element's border.

Note: The CSS border property is used to define the border of the HTML element that exists between the margin and padding of the HTML element. Basically, it is used to set the border width, style, and color.

Source Code

          p.inset{
  border-style: inset;
}
p.outset{
  border-style: outset;
}
p.none{
  border-style: none;
}
p.hidden{
  border-style: hidden;
}
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.mix {
  border-style: dotted dashed solid double;
}

Try it now

Code Explanation

Note: In this example CSS border-style property is described.Followings are the border-style property values like dotted,dashed,solid,double,groove,ridge,outset,none,hidden.

CSS Border Width

The border-width property of CSS specifies the border width of the HTML element.CSS border-width is the shorthand property that represents the four side thickness of the element's border.

General Syntax

      p{
  border-style: dashed;
  border-width: 10px;
}

Try it now

Source Code

          .example {
  border-style: dashed;
  border-width: 10px;
}

Try it now

Code Explanation

Note: In this example, the CSS border-width property is described that is used to provide the border thickness of the HTML element.

CSS Border Color

The CSS border color property specifies the border color of the HTML element.It has following syntax border-color:#colorCode;.It provides flexiblity to assign all the individual border property to a single property i.e (border).

General Syntax

      p{
  border-style: solid;
  border-color: #ff0000;
}

Try it now

Source Code

          p.ex {
  border-style: solid;
  border-color: #ff0000;
}

Try it now

Code Explanation

Note: In this example, the CSS border-color property is used to provide the border color of the HTML element.

Shorthand Rule For Border

CSS border shorthand property specifies the border width,border style and border color.

General Syntax

      p {
  border: 5px solid #00ff00;
}

Try it now

Source Code

          p.example {
  border: 5px solid #00fff0;
}

Try it now

Code Explanation

Note: CSS border shorthand property is used to specify the HTML element border width,style & color.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4