CSS Border

CSS Border will be used to apply border to any html element. The CSS Border shorthand property sets all the border properties in one declaration or statement. The Border properties that can be set using CSS Border, are border-width, border-style, and border-color. And the order doesn’t matter and if one of the values are missing that is also doesn’t matter. Here is syntax and example for using Border shorthand Property.

Syntax of CSS Border shorthand property

Border shorthand property is combination of these three individual properties. Border Width, border style, border color properties.
[css] border: border-width border-style border-color;

1) Border Width (border-width)

Border width property will be used to define border width. Example code of border width is :
[css] border-width:10px;

2) Border Style (border-style)

Border style is the style of border like thin, solid, dotted. Using border style property we can apply different styles on four different sides. Below are the values for border style

[css] border-style:solid;
  • solid : Defines a solid border.
  • dashed : Defines a dashed type of border.
  • dotted : Defines a dotted line type of border.
  • double : Defines a double line of border.
  • groove : Defines a 3D grooved border. The effect depends on the border-color value.
  • ridge : Defines a 3D ridged border. The effect depends on the border-color value
  • inset : Defines a 3D inset border. The effect depends on the border-color value
  • outset : Defines a 3D outset border. The effect depends on the border-color value
  • initial : Applies property value to default value.
  • inherit : Inherits this property value from its parent element.
  • none : Default value. Specifies no border.
  • hidden : The same as “none”, except in border conflict resolution for table elements

3) Border Color (border-color)

This is the colour of the border. By using border color property we can apply different colours on different sides. But the simple usage is applying one single color. Here is example code for border color property :

[css] border-color:#000;

Example code for CSS Border shorthand property

[css] border:10px solid blue;

First value is the border width and it is 10px.

Second value is border style and it is solid, you can see list of available styles above under border style. here we can use different border styles on different sides.

Third value is border color and it is blue, we can different colors on different sides.

Border Radius

Here we will see border radius property also, border radius will be applied to get curved corners for border. Here is example code.

Border Radius only works for latest web browsers, and on different sides different border radius can be applied.

[css] border-radius:10px;
Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.