HTML Borders

The best way to create HTML borders is to actually use CSS (Cascading Style Sheets). Using CSS, you can create a border around any HTML element.

There are a range of CSS properties that you can use to define borders but the shorthand border property is the most concise way.

Below are some examples of what you can do with HTML, borders, and CSS.

Solid Border

CodeResult

HTML borders are best created with CSS.

Dotted Border

CodeResult

HTML border code - or should that read CSS border code?

Dashed Border

CodeResult

HTML border code - or should that read CSS border code?

Outset Border

CodeResult

HTML border code - or should that read CSS border code?

Inset Border

CodeResult

HTML border code - or should that read CSS border code?

Grooved Border

CodeResult

HTML border code - or should that read CSS border code?

Double Border

CodeResult

HTML border code - or should that read CSS border code?

Ridged Border

CodeResult

HTML border code - or should that read CSS border code?

Mixed Border

You can combine different border types and styles for each side of the HTML element.

CodeResult

Create borders for any HTML element.

Inline, Embedded, or External?

All of the above examples use "inline" styles to create the borders. You can also use "embedded" style sheets or "external" style sheets. In fact, embedded style sheets are more powerful than inline styles. And external style sheets are more powerful than embedded style sheets.

Use embedded style sheets if you need to apply the same border to multiple objects on the same page. Use external style sheets if you need to apply the same border to multiple objects on multiple pages (or across your whole site).

To learn more, see Inline Style Sheets, Embedded Style Sheets, and External Style Sheets.

For more info, check out the various border properties on the CSS Properties list.

Enjoy this page?