borders

The border of the visual elements includes the border style, width and the color. These three properties are defined separately.

Example

border:1px solid red;

border:5px dotted green;

border:10px dashed black;

border is a shorthand property of border-width, border-style, and border-color properties.

border-width

The border may be thick, thin or medium size. The width of the border may also be defined by the values measured in px, em or other units.

Example

border-width:thin;

border-width:medium;

border-width:thick;

border-width:10px;

border-width:5px 10px;

border-width property represents the width of the four sides.

border-top-width, border-right-width, border-bottom-width and border-left-width properties define the width of the top, right, bottom and left sides respectively.

what about more than one values for the border-width?

Different values for the width of the four sides may also be defined in one border-width property.

border-width:10px;: 10px is the width of all of the four sides.
border-width:10px 20px;: top and bottom sides have width of 10px, and the width of the remaining two sides is 20px.
border-width:10px 20px 30px;: 10px, 20px and 30px represent the width of top, right and bottom sides. And left side has the same width as right (20px).
border-width:5px 10px 15px 20px;: These four values define width for the top, right, bottom and top sides.

The above given rule is general and applicable on border-color, border-style and many other properties that you'll encounter in next tutorials (talking about the different values for the same property).

border-color

It defines the background-color of the border. The color value may be specified by rgb or hexadecimal values.

Example

border-color:red;

border-color:rgb(0,0,255);

border-color:#ff0;

border-color:red green;

border-style

There are many predefined styles for the border. The following are the styles of border.

Example

border-style:none;

border-style:dotted;

border-style:dashed;

border-style:solid;

border-style:double;

border-style:groove;

border-style:ridge;

border-style:inset;

border-style:outset;

border-style:solid dotted;

border - A shorthand property

All of the above given properties for the border can be combined in one border property.

Example

<div style="border:width style color;">
<div style="border:10px groove gray;"></div>

Try </>

10px is the border-width, groove is the border-style and gray is the border-color.

Next Previous