HTML Border Code

This page contains HTML code for adding borders to your html elements. In these examples, the HTML border is applied to the div tag but you can apply borders to any HTML element you wish.

Solid Border

To specify a solid border, use the 'solid' keyword.


<div style="width:200px;height:100px;border:3px solid orange;">

This box has a solid html border.

</div>

This code results in:

This box has a solid html border.

Dotted Border

To specify a dotted border, use the 'dotted' keyword.


<div style="width:200px;height:100px;border:3px dotted orange;">

This box has a dotted html border.

</div>

This code results in:

This box has a solid html border.

Dashed Border

To specify a border made up of dashes, use the 'dashed' keyword.


<div style="width:200px;height:100px;border:3px dashed orange;">

This box has a dashed html border.

</div>

This code results in:

This box has a dashed html border.

Mixed Border

You can use a mixture of borders styles like this:


<div style="width:200px;height:100px;border-width:6px;border-color:orange;border-style:dotted dashed solid double;">

This box has a mixed html border. One side is solid, another side is dashed, another is dotted, and another is double.

</div>

This code results in:

Create borders for any HTML element.