Understand CSS Border Style Property

CSS Border

CSS border 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 short hand 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.

Let us see its general statement.

General Syntax

p.dotted {border-style: dotted;}    

Source Code

Download
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.inset {
   border-style: inset;
}

p.outset {
   border-style: outset;
}

p.none {
   border-style: none;
}

p.hidden {
   border-style: hidden;
}

p.mix {
   border-style: dotted dashed solid double;
}

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

Source Code

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

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

Source Code

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

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

Source Code

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

Code Explanation

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

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com