Border Styling in CSS:

With the help of CSS we can set the border property with different values like color of border, style of border such as dashed border, double border etc to any HTML element. Here is a list of border properties:

  • Border Color
  • Border Width
  • Border Style

Border Color Property in CSS:

You can set the color of border with the border-color property in CSS. There are 5 different types to color border.

  • border-color: This property will color the border all sides with same color
  • border-top-color: This property will color only top border with specified color
  • border-right-color: This property will color only right border with specified color
  • border-bottom-color: This property will color only bottom border with specified color
  • border-left-color: This property will color only left border with specified color

Example:

In following example we will use all 5 types of setting color to the border

 Border Width Property in CSS:

We can also set the width means the thickness of border. You can assign width in pixel. There are 5 different types of setting the width of border.

  • border-width: It will set the all four borders with specified width
  • border-top-width: It will set only the width of top border
  • border-right-width: It will set only the width of right border
  • border-bottom-width: It will set only the width of bottom border
  • border-left-width: It will set only the width of left border

Example:

 Border Style Property in CSS:

With the CSS border-style property we can set the different type of border. Here is a list of border styles:

  • none: means no border
  • solid: means a single solid line
  • doted: means a series of dots
  • dashed: means a series of short lines
  • double: means double solid line
  • groove: defines a 3D groove effect over a border depends on border color
  • ridge: defines a 3D ridge effect over a border depends on border color
  • inset: defines a 3D inset effect over a border depends on border color
  • outset: defines a 3D outset effect over a border depends on border color
  • hidden: same as none

You can also assign these styles to border in 5 different ways:

  • border-style: It will set the property for all four side border
  • border-top-style: It will set the property for only top border
  • border-right-style: It will set the property for only right border
  • border-bottom-style: It will set the property for only bottom border
  • border-left-style: It will set the property for only left border

Example:

In following example we will use all styles of a border

Note: You can also add different styles on different border side for a single container. In following example we use four different styles of border in a container.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *