Scrollbox Border

This page contains scrollbox border code and examples. You can copy/paste this HTML code into your website or blog.

All of the examples below use the CSS border property applied to the HTML <div> element. When you use this property, you need to provide 3 values: width, style, color.

There are many combinations of border style/color/width, so you can use the examples below and experiment around with the code as you like.

Solid Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:1px solid #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Dotted Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:1px dotted #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Dashed Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:1px dashed #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Thick, Solid, Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:16px solid #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Inset Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px inset #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Outset Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px outset #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Grooved Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px groove #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Double Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px double #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Ridged Border

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px ridge #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

Variations

You can also set a different style/width/color on each side of your scrollbox.

Source Code	Result
<div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;border-top:6px inset #DEBB07;border-right:1px dashed #000000;border-bottom:16px double #DEBB07;border-left:46px solid #DEBB07;"> Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders. </div>	Use the CSS 'border' property to set borders around your HTML scrollbox. You can set the width, style, and color of your borders.

More Colors

Here's more about colors in HTML. You can also check out these color scheme combinations to choose a color scheme for your scrollbox borders.