HTML Borders

The best way to create HTML borders is to actually use CSS (Cascading Style Sheets). You can include CSS within your HTML code by using the style attribute.

There are a range of properties that you can use to determine 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?

Hybrid Border


<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.

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