Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Borders

You can add a border to any visual HTML element. Each side of a border can be set separately. To set individual margins you must work clockwise from the top.

This text is here to show a border around a division element. You could say it exists only to show off!

The border color could be set to any named color, RBG color, or hex color. The border width can be set to any reasonable size you like. Even the border style can be changed, as you’ll soon see.

[ Other CSS styles were used on that division they are not relevant to this tutorial. ]

Here’s the code I used for the border around that show-off division element:

div {border: 1px solid green;}

That’s the “shortcut” way of coding the border property. Use it when you want all sides to have the same border color, line thickness, and style.

I’m sure you understand color and line thickness without explanation, so let’s look at the border styles:

There are two other values that could be used: hidden or none. None is the same as using no border. Hidden is the same as none except that it takes precedence over conflicting borders. If any side of a border has a value of hidden, it suppresses all borders.

Here's a look at each border style:

border: 2px solid red;

border: 2px dashed blue;

border: 2px dotted green;

border: 3px double purple;

border: 4px outset maroon;

border: 4px inset orange;

border: 5px groove gray;

border: 5px ridge brown;

Those boxes show what each of those border styles looks like. The differences are more dramatic with thicker borders, but this should give you an idea. The best way to “get it” is to experiment.

Some border styles will not look any different from others if the thickness is set too small, so if you have a border that doesn’t seem right, try setting the width to a higher numerical value.

For example, the double border has to be at least 3 pixels wide to have two lines. The groove and ridge styles generally have to be set the widest to display as designed.

While the "shortcut" way of coding different thickness, styles, and colors into just one rule is handy, each side can be set separately. Please refer to the CSS box model tutorial for more on that.

I’ll just conclude this by saying that each side of the border can have a different thickness, different color, and different style. Of course, the result may not be very pretty, but sometimes pretty isn’t the desired outcome.

Psst . . . wanna know a secret? This tutorial is over. giggle emoji

CSS Borders

Essentials

Drawing Board

Notices

Sample Graphics