MySpace Home

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.

MySpace Scroll Box Borders

Related:
• Scrollbox Generator
• Scroll Box Colors
• Picture Scroll Box
• CSS Borders (How to)
• Scrolling Comments
• Hide MySpace Comments
• Color Chart
• More MySpace Codes

This page contains examples of scroll box borders that you can put on your MySpace scroll boxes. In fact, these scroll box borders will work on any web page. MySpace scroll boxes are created using HTML. Scroll box borders are specified using Cascading Style Sheets (CSS).

To use these HTML/CSS codes, simply copy and paste them into your MySpace profile page and change the values to suit.

Thin Border

Here's a basic border for your scroll box. In the HTML code, I've specified that the border is 1 pixel wide, solid, and a dark green color (hex color value: #6DB72C).

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:1px solid 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

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

Thick Border

In this example, I've specified that the border is 10 pixels wide. It's still solid and the same color as the previous example.

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px solid 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Dotted Border

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

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px dotted 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

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:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px dashed 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Grooved Borders

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px groove 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Double Borders

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px double 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Ridged Borders

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px ridge 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Outset Borders

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px outset 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Inset Borders

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px inset 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

Mixed Borders

You can use different border styles for each side of your scroll box. With a little imagination, you can achieve some cool results!

HTML Code:

<div style="height:100px;width:200px;overflow:scroll;background-color:D0F18F;color:53760D;border:10px double 6DB72C;">This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using <a href="/css/" target="_blank">CSS</a>. <a href="/css/tutorial/css_border.cfm" target="_blank">More about CSS borders</a>.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

Result:

This is enough sample text to make the box grow scrollbars - then we can call the box a scroll box! Note that the borders are defined using CSS. More about CSS borders.

More About HTML Borders

The following articles explain the HTML/CSS code you need to use to set borders and their colors. There's also a color picker that makes it easy for you to choose any color you like for your scroll boxes (or anything else on your MySpace/web page).

More HTML Codes

Check out our huge range of free HTML codes that you can copy/paste into your website or MySpace page.

And, if you wanna learn more, check out our free HTML tutorial!

Enjoy this website?

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