Bordered Scroll Boxes

Solid Bordered Scroll Box

<div style="height:120px;width:250px;overflow:scroll;border:5px solid #purple;">text goes here :)</div>

This code will give you a scroll box with a colored border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Scroll Box With Dotted Border

<div style="height:120px;width:250px;overflow:scroll;border:5px dotted purple;">text goes here :)</div>

This code will give you a scroll box with a dotted border. You can change the width and height of this box by editing the numbers in the code after 'width' and 'height'. You can also change the colour of your border by changing where the code says 'purple' to any colour you want. But if your colour has two words, for example, 'sky blue' you would need to squish them together so in the code they read 'skyblue'

Scroll Box with Dotted Border

<div style="height:120px;width:250px;overflow:scroll;border:5px dashed purple;">text goes here :)</div>

This code will give you a scroll box with a dashed border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Scroll Box with Grooved Border

<div style="height:120px;width:250px;overflow:scroll;border:10px groove purple;">text goes here :)</div>

This code will give you a scroll box with a grooved border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Scroll Box With Double Border

<div style="height:120px;width:250px;overflow:scroll;border:10px double purple;">text goes here :)</div>

This code will give you a scroll box with a double border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Scroll Box with Ridged Border

<div style="height:120px;width:250px;overflow:scroll;border:10px ridge purple;">text goes here :)</div>

This code will give you a scroll box with a ridged border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Scroll Box With Outset Border

<div style="height:120px;width:250px;overflow:scroll;border:10px outset purple;">text goes here :)</div>

This code will give you a scroll box with a outset border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Scroll Box With Inset Border

<div style="height:120px;width:250px;overflow:scroll;border:10px outset purple;">text goes here :)</div>

This code will give you a scroll box with a inset border. You can change the width and height of this box by editing the numbers in the code after "width" and "height". You can also change the colour of your border by changing where the code says "purple" to any colour you want. But if your colour has two words, for example, "sky blue" you would need to squish them together so in the code they read "skyblue"

Click to set custom HTML