CSS Border

Border of an element goes around the padding and content.

CSS Border Properties

The CSS border properties allow you to define the border area of a box. The border can either be a predefined style like, solid line, double line, dotted line, etc. or it can be an image. The following section will describe you how to set the various properties defining the style (border-style), color (border-color), and thickness (border-width) of the border.

The border-width Property

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element's border at the same time.

  • p {
  •     border-width: medium 10px thick 15px;
  • }
 

Note:If the value for the border-width property is missing or not specified, the default value (medium) of the border-width will be used instead.


The border-style Property

The border-style property sets the style of a box's border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

The border-style property may take one of the following values: none, hidden, dashed, dotted, double, groove, inset, outset, ridge and solid.

none: Defines no border.

hidden: Defines hidden border.

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are same as the border-width value

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

  • p {
  •     border-style: dotted;
  • }

The border-color Property

The border-color property specify the color of a box's border. This is also a shorthand property for setting the color of all the four sides of an element's border.

  • p {
  •     border-style: solid;
  •     border-color: #ff0000;
  • }
 

Note:The border-color property does not work if it is used alone. Use the border-style property to set the border first.


The border Shorthand Property

The border CSS property is a shorthand property for setting one or more of the individual border properties border-style, border-width and border-color in a single rule.

  • p {
  •     border: 5px solid #ff4500;
  • }

If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

 

Note:If the value for the border-color property is missing or not specified when setting the borders for an element (e.g. border: 5px solid;) the element's color property will be used as the value for the border-color.

In this example, the border will be a solid black line of 5px width:

  • p {
  •     color: black;
  •     border: 5px solid;
  • }

But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for border-style property is none.

In the example below, there will be no border:

  • p {
  •     border: 5px #00ff00;
  • }
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.