elibraryportal Logo

CSS Border

The border properties is used to how the border of the box representing an element should look.

There are some border properties used in CSS.

  1. border-style
  2. border-color
  3. border-width
  4. border-radius

1) CSS border-style

border-style property is used to border type which you want to display on the web page.

The border-style Property.

Value Description
none No border.
dotted Display a dotted border.
dashed Dispaly dashed border.
solid Display solid border.
double Two lines borders.
groove 3D grooved border. according to border-color value.
ridge It defines a 3d ridged border. according to border-color value.
inset It defines a 3d inset border. according to border-color value.
outset It defines a 3d outset border. according to border-color value.

Use Shorthand Combinations Property

border border-color border-style border-width
border-top border-top-color border-top-style border-top-width
border-bottom border-bottom-color border-bottom-style border-bottom-width
border-left border-left-color border-left-style border-left-width
border-right border-right-color border-right-style border-right-width


Test it Now


No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

2) CSS border-width

border-width property is used to set the border's width.


Test it Now
Next TopicCSS Margin