CSS Borders

In this tutorial you will learn about the CSS Borders and its application with practical example.

CSS Borders allow us to completely customize the appearance of the borders that appear around HTML Elements. CSS Border properties gives us way to specify the width,style and color of an HTML Element’s border.We use the border-width, border-style, and border-color properties.

Property Description
border-width This property specifies thickness of your border for the HTML Element.
border-style This property specifies colors for the border can be any color defined by RGB, hexadecimal, or key terms.
border-color This property specifies what style of border to display for the HTML Element. Example – none,solid,dotted,dashed,double,groove,ridge,inset,outset and hidden

 

Border Style

The border-style property specifies what style of border to display.Borders can have the following possible style values

none,solid,dotted,dashed,double,groove,ridge,inset,outset and hidden

Example Code:

Output:

This is a border with none width.

This is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

Borders for Each Side

In CSS we can specify different borders properties for four different sides:

Side Properties
Bottom border-bottom-color
border-bottom-style
border-bottom-width
Left border-left-color
border-left-style
border-left-width
Right border-right-color
border-right-style
border-right-width
Top border-top-color
border-top-style
border-top-width

Example Code:

This is a a border with four different styles.

Border Shorthand property

We can specify all the individual border properties in one property. This is called a shorthand property.

Syntax:

Example Code:

 

In this tutorial we have learn about the CSS Borders and its application with practical example. I hope you will like this tutorial.