FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

HTML Borders

Related:
• CSS 'border' Specification
• Comment Box Borders
• HTML Image Borders
• HTML Color Codes

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

<div style="width:200px;height:100px;border:1px solid blue;">
HTML borders are best created with CSS.
</div>

This code results in:

HTML borders are best created with CSS.

Dotted Border

<div style="width:200px;height:100px;border:2px dotted blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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

Dashed Border

<div style="width:200px;height:100px;border:2px dashed blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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

Outset Border

<div style="width:200px;height:100px;border:2px outset blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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

Inset Border

<div style="width:200px;height:100px;border:2px inset blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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

Grooved Border

<div style="width:200px;height:100px;border:2px groove blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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

Double Border

<div style="width:200px;height:100px;border:2px double blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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

Ridged Border

<div style="width:200px;height:100px;border:2px ridge blue;">
HTML border code - or should that read CSS border code?
</div>

This code results in:

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.

<div style="width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;">
Create borders for any HTML element.
</div>

This code results in:

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 website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/html_borders.cfm">HTML Borders</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites

Oh, and thank you for supporting Quackit!

Need Content for your Website?

Get unique, quality digital content for your website. You can even earn money by reselling it!

Includes:

Over 29,000 Ebooks
Over 7,000 Website templates
Over 11,000 Fonts
Over 39,000 Logos
Over 1,000 Cell Phone Games
Over 3,000 Cell Phone Images
Over 21,000 Ring Tones
...and much more!

Get your 10GB webmaster package now!