CSS Border

tutorial and example
tutorial and example

CSS Border Properties

CSS border properties provide you to specify the style, width and color of an element’s border.

There are various following CSS border properties are given below.

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

CSS Border-style

CSS border style properties are used to specify ther border type. There are various types of border style that are given in below table.

Border value Description
none It defines no border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders with the same border-width value.
groove It is used to define a 3d grooved border. effect is generated according to border-color value.
ridge It is used to define a 3d ridged border. effect is generated according to border-color value.
inset It is used to define a 3d inset border. effect is generated according to border-color value.
outset It is used to define a 3d outset border. effect is generated according to border-color value.
hidden It is used to define a hidden border.

Let us see an example of CSS border-style:

Try Now

NOTE: You can try it yourself.

Border Width

The border width property is used to specify the width. It has different size ( px, pt, cm, em etc) or three pre-define value – thinmedium and thick.

There are four values (top, right, bottom, and left) of border width.

Let us see an example of CSS border width:

Try Now

Border Color

Border color is used to set the color of borders. There are different techniques to use border color that are given below.

  • name: It specifies the color name. like “red”.
  • Hex: It specifies the hex value. Like “#00FF00”.
  • RGB: It specify the RGB value. Like “rgb(255,225,225)”.
  • transparent

Let us see an example of CSS border color:

Try Now