tutorialstonight logo
A Platform To Learn To Code

CSS BORDERS



CSS border properties are used to design and shape borders of elements in web pages.

The CSS border can specify color, border type, width of border etc. These are following properties in CSS for border:

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



1.) CSS Border Style

The border-style specifies the type of border you want on a webpage.

The CSS properties border-style can have values like:

  • solid - Border created is solid.
  • dashed - Border created is dashed.
  • dotted - Border created is dotted.
  • double - Border created is double border.
  • hidden - Border created is hidden.
  • none - No border is created.
  • groove - Groove defines a 3D grooved border.Effect depends on the color value of the border.
  • ridge - Ridge defines a 3D ridged border.Effect depends on the color value of the border.
  • inset - Inset defines a 3D inset border.Effect depends on the color value of border.

Example

Run the code

2.) CSS Border Color

Borders can be given color using border-color property.

The color value of border-color property can be given in form of:

  • color name - like red,green,blue etc.
  • HEX value - like #432512.
  • RGB value - like rgb(45,90,124).
  • HSL value - like hsl(95,50%,50%).

Note - Before setting border-color you must set border-style because to set color to border it must exist first.


Example

Run the code

3).CSS Border Width

CSS border-width property controls the width of the border.

The width value of border-width property can be given in any valid scale.

Using border width property we can also control width of each side of the box by using following property:

  • border-top-width - It is the width of top of the box.
  • border-right-width - It is the width of the right of the box.
  • border-bottom-width - It is the width of bottom of the box.
  • border-left-width - It is the width of left of the box.

Note - Before setting border-width you must set border-style because to set width to border it must exist first.


Example

Run the code

Instead of using CSS property to specify width for each side of the box you can also set values like: border-width: top right bottom left.

Using this method you can set different values to different sides.

Example

Run the code

4.) CSS Border Radius

The CSS border-radius property is used to set radius to the borders.

Example

Run the code