CancelImage Upload

List and examples of various border styles available in CSS

Thanks to CSS borders do not have to be plain things. Indeed, with the choice listed below there should be a border style suitable for ever occasion. Especially the three dimension borders are worth trying out.

Solid - border:3px #ff0000 solid;

Produces a standard solid border:

border:3px #ff0000 solid;

Dotted - border:3px #ff0000 dotted;

Gives the border a dotted appearance. Looks better with 1px width than in our 3px example:

border:3px #ff0000 dotted;

Dashed - border:3px #ff0000 dashed;

Sometimes confused with dotted, the difference should be noted:

border:3px #ff0000 dashed;

Double - border:3px #ff0000 double;

Produces a double border:

border:3px #ff0000 double;

Groove - border:3px #ff0000 groove;

Gives the border a 3D appearance. Width needs to be set to more than 1px:

border:3px #ff0000 groove;

Ridge - border:3px #ff0000 ridge;

Specifies a three dimensional border with a ridge:

border:3px #ff0000 ridge;

Inset - border:3px #ff0000 inset;

Three dimensional inset border:

border:3px #ff0000 inset;

Outset - border:3px #ff0000 outset;

Three dimensional outset border:

border:3px #ff0000 outset;

Want to leave a comment?

No problem. Just enter your email and password below.

register | home | reminder

myDesignTool Networking •