Sponsored Links

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

Scroll Box Borders

Related:
• HTML Scroll Box
• Colorful Scroll Boxes
• Picture Scroll Box
• HTML Color Chart
• About HTML Colors
• About CSS Borders

Here are examples of HTML scroll boxes with various types of borders. Borders are easy to do in HTML. You can copy/paste the code from any of these examples, then change the values to suit. The border code is relatively self-explanatory. In any case, here's more about CSS borders.

Thin Border

In this example, the border is 1 pixel wide, solid, and a bright green color (hex color value: #0ADA0A).

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.

Setting borders and colors in HTML is easy - if you know how.

Thick Border

In this example, the border is 9 pixels wide. It's still solid and the same color as the previous example.

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Dotted Border

To create a dotted border, you simply change the value 'solid' to 'dotted'.

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Dashed Border

To create a dashed border, you simply use the value 'dashed' (instead of 'solid' or 'dotted' as in our previous examples).

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Grooved Borders

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Double Borders

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Ridged Borders

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px ridge #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Outset Borders

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px outset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Inset Borders

HTML Code:

<!-- HTML codes by Quackit.com -->
<div style="height:80px;width:180px;overflow:scroll;border:9px inset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

Mixed Borders

You can use different border styles for each side of your scroll box. Try experimenting to see what you can come up with!

HTML Code:

<div style="height:80px;width:180px;overflow:scroll;background-color:D0F18F;color:53760D;border:9px double 6DB72C;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

More Help

You might also find these articles useful:

Enjoy this website?

Add this page to your Favorites
Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/scroll_box_border.cfm">Scroll Box Borders</a> from Quackit.com
Help support Quackit by making a donation
Add this page to your favorite social bookmarks sites: