Border Properties - CSS

CSS border properties are used to style the border of the selected element.

Property	Description	Values
border border-left border-top border-right border-bottom	Sets the border colour, width, style in one declaration.	widh style color
border-width border-left-width border-top-width border-right-width border-bottom-width	Specifies the width of a border.	px , in , cm, mm, pt
border-color border-left-color border-top-color border-right-color border-bottom-color	Specifies the color of a border.	hex, rgb, color names
border-style border-left-style border-top-style border-right-style border-bottom-style	Specifies the style of a border like solid line, double line etc.	none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden

1. Border property

p{
  border:2px solid #ccc;
}

Border in one declaration.

2. Double Border

p{
  border-style:double;
}

Double line Border

3.Dotted Border

p{
  border-style:dotted;
}

dotted Border

4.Dashed Border

p{
  border-style:dashed;
}

Dashed Border

5.Groove Border

p{
  border-style:groove;
}

groove Border

6. Ridge Border

p{
  border-style:ridge;
}

ridge Border

7. Inset Border

p{
  border-style:inset;
}

inset Border

8. Outset Border

p{
  border-style:outset;
}

outset Border

9.Bottom Border in one declaration

p{
  border-bottom:2px solid #4287f5;
}

Bottom Border in one declaration.

10.Mixed Border

p{
  border-top:2px solid #07b56d;
  border-right:4px double #4287f5;
  border-bottom:4px dotted #b5071e;
  border-left:4px dashed #db7e04;
}

Mixed Border