Scroll Box Border
This page contains scroll box border code. Feel free to copy and paste the scroll box border code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.
Also, please consider keeping the link back to this website - if you do it will be very much appreciated!
You might have seen the scroll box color examples where we changed the background color and text color of the scroll box. In this article, we add and change the scroll box border.
The best way of creating a scroll box border is to use the CSS border property. This allows you to define the border's width, color, thickness, style, and more.
Solid Border - Thin
Here's a basic example of creating a thin border around your scroll box. In this case, the border is 1 pixel wide, solid, and LimeGreen in color. To do this, we use this code: border:1px solid LimeGreen;.
| Source Code |
Result |
|
Here's a demonstration of how to add a thin, solid border to a scroll box. To add the border, we use the CSS 'border' property.
|
Solid Border - Thick
| Source Code |
Result |
|
Here's a demonstration of how to add a thick, solid border to a scroll box. To add the border, we use the CSS 'border' property.
|
Dotted Border - Thin
| Source Code |
Result |
|
Here's a demonstration of how to add a thin, dotted border to a scroll box. To add the border, we use the CSS 'border' property.
|
Dotted Border - Thick
| Source Code |
Result |
|
Here's a demonstration of how to add a thick, dotted border to a scroll box. To add the border, we use the CSS 'border' property.
|
Dashed Border - Thin
| Source Code |
Result |
|
Here's a demonstration of how to add a thin, dashed border to a scroll box. To add the border, we use the CSS 'border' property.
|
Dashed Border - Thick
| Source Code |
Result |
|
Here's a demonstration of how to add a thick, dashed border to a scroll box. To add the border, we use the CSS 'border' property.
|
Grooved Border
| Source Code |
Result |
|
Here's a demonstration of how to add a grooved border to a scroll box. To add the border, we use the CSS 'border' property.
|
Double Border
| Source Code |
Result |
|
Here's a demonstration of how to add a double border to a scroll box. To add the border, we use the CSS 'border' property.
|
Ridged Border
| Source Code |
Result |
|
Here's a demonstration of how to add a ridged border to a scroll box. To add the border, we use the CSS 'border' property.
|
Outset Border
| Source Code |
Result |
|
Here's a demonstration of how to add an outset border to a scroll box. To add the border, we use the CSS 'border' property.
|
Inset Border
| Source Code |
Result |
|
Here's a demonstration of how to add an inset border to a scroll box. To add the border, we use the CSS 'border' property.
|
Mixed Border
| Source Code |
Result |
|
Here's a demonstration of how to add a mixed border to a scroll box. To add the border, we use the CSS 'border' property.
|
