The border-style Property

This property specifies what kind of border to display:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border. The 3D effect depends on the color chosen for the page

An inset border. The 3D effect depends on the color chosen for the page

An outset border. The 3D effect depends on the color chosen for the page

No border.

A hidden border.

A mixed border.

The border-width Property and The border-color Property

The border-width property specifies the width of the four borders, while the border-color property specifies the color of the four borders

Here we have some colored borders of varying sizes and colors.

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

A solid red border

A solid green border

A dotted blue border

A red inset border with slateblue text.

The border-radius Property

This property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Note:No "border-(control property)" will work without having the border-style property set first. Always specify the "border-style" property to set the borders firs, then use additonal control properties to modify the borders.

Who knew so much went into making a border. The next time you see a nicely formatted page with borders that looks really nice, you can tell the person that authored the page took their time to get it right.

More Borders
Home