CSS Solid Borders

A solid border line

Use the following code:

<p style="border:2px solid #1a67b8;">A solid border line</p>

A solid border line

Use the following code:

<p style="border:5px solid #1a67b8;">A solid border line</p>

A solid border line

Use the following code:

<p style="border:10px solid #1a67b8;">A solid border line</p>

Instead of using orange, I specified the exact color by using hexadecimal. In this case, I used the Squidoo orange color of #ff9900.

A solid border line with Squidoo orange color

Use the following code:

<p style="border:4px solid #ff9900;">A solid border line with Squidoo orange color</p>

A solid border line with Squidoo orange color

Use the following code:

<p style="border:10px solid #ff9900;">A solid border line with Squidoo orange color</p>

A solid border line with Squidoo orange color background

Use the following code:

<p style="background-color:#ff9900; border: solid 8px green;">A solid border line with Squidoo orange color background</p>

The background-color:#ff9900; part is the orange background.
The border: solid 2px green; part is the 2 pixel solid line.

By adding a height and width (example: height:180px;width:90px;), I can change the dimensions of the solid lined rectangle.

A solid border line with height and width

Use the following code:

<p style="border: solid 8px green;height:180px;width:90px;">A solid border line with height and width</p>

Again, by adding a height and width (example: height:90px;width:200px;), I can change the dimensions of the solid lined rectangle.

A solid border line with height and width

Use the following code:

<p style="border: solid 8px green;height:90px;width:200px;">A solid border line with height and width</p>

Blue, rounded solid line border

The rounded angles are formed using the moz attribute (think Mozilla), it displays as rounded when using Mozilla Firefox and a few other browsers.

• -moz-border-radius-topleft


• -moz-border-radius-topright


• -moz-border-radius-bottomleft


• -moz-border-radius-bottomright

Unfortunately, the moz attribute is not read properly by Internet Explorer, so the border will likely appear as right angles.

Use the following code:

<p style="border: 3px solid rgb(0, 102, 153); padding: 15px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; line-height: 20px; font-size: 15px; text-align: justify; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> Blue, rounded solid line border</p>

8px blue border with Squidoo orange background

<p style="border: 8px solid rgb(0, 102, 153); padding: 15px; background-color:#ff9900; none repeat scroll 0% 0%; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; line-height: 20px; font-size: 15px; text-align: justify; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> 8px blue border with Squidoo orange background</p>