Others




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

Examples

1. Border property
p{
  border:2px solid #ccc;
}
Try it Yourself

Border in one declaration.

2. Double Border
p{
  border-style:double;
}
Try it Yourself

Double line Border

3.Dotted Border
p{
  border-style:dotted;
}
Try it Yourself

dotted Border

4.Dashed Border
p{
  border-style:dashed;
}
Try it Yourself

Dashed Border

5.Groove Border
p{
  border-style:groove;
}
Try it Yourself

groove Border

6. Ridge Border
p{
  border-style:ridge;
}
Try it Yourself

ridge Border

7. Inset Border
p{
  border-style:inset;
}
Try it Yourself

inset Border

8. Outset Border
p{
  border-style:outset;
}
Try it Yourself

outset Border

9.Bottom Border in one declaration
p{
  border-bottom:2px solid #4287f5;
}
Try it Yourself

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;
}
Try it Yourself

Mixed Border