CSS BORDER

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.

EXAMPLE

1.	p {
2.	    border-width: medium 10px thick 15px;
3.	}

The border-style Property

The border-style property sets the style of a box’s border such as: soliddotted, 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: nonehiddendasheddotteddoublegrooveinsetoutsetridge 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

EXAMPLE

1.	p {
2.	    border-style: dotted;
3.	}

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.

EXAMPLE

1.	p {
2.	    border-style: solid;
3.	    border-color: #ff0000;
4.	}

The border Shorthand Property

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

EXAMPLE

1.	p {
2.	    border: 5px solid #ff4500;
3.	}

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.

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

EXAMPLE

1.	p {
2.	    color: black;
3.	    border: 5px solid;
4.	}

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:

EXAMPLE

1.	p {
2.	    border: 5px #00ff00;
3.	}
Categories: CSS