Div Examples for Borders

How to add borders and backgrounds to content boxes

Example…

This is made up from <div style=”border: 6px dashed #ff0000;padding:10px; background-color:#FFC””>Your Text here…</div>

1. <div style=” opens the tag.
2. border: what we are adding
3. 6px size/thickness of the line/dot
4. dashed border style
5. padding:10px space around your content inside your box
6. background-color:#FFC sets the background colour of the box
7. </div> closes the tag

You can also add width as a fixed size (px) or percentage (%).

<div style=”border: 6px dashed #ff0000; padding: 10px; background-color: #ffc; width: 120px;”>Your Text here…</div>

Border-style values:

none: Defines no border

<div style=”border: none #000000; padding: 3px; background-color: #cff;”>Your Text here…</div>

dotted: Defines a dotted border

<div style=”border: 1px dotted #000000; padding: 3px; background-color: #ffc;”>Your Text here…</div>

dashed: Defines a dashed border

<div style=”border: 1px dashed #000000; padding: 3px;”>Your Text here…</div>

solid: Defines a solid border

<div style=”border: 1px solid #000000; padding: 3px;”>Your Text here…</div>

double: Defines two borders. The width of the two borders are the same as the border-width value

<div style=”border: 3px double #000000; padding: 3px;”>Your Text here…</div>

groove: Defines a 3D grooved border. The effect depends on the border-color value

<div style=”border: 5px groove #ff0000; padding: 3px;”>Your Text here…</div>

ridge: Defines a 3D ridged border. The effect depends on the border-color value

<div style=”border: 5px ridge #98bf21; padding: 3px;”>Your Text here…</div>

inset: Defines a 3D inset border. The effect depends on the border-color value

<div style=”border: 5px inset #00F; padding: 3px;”>Your Text here…</div>

outset: Defines a 3D outset border. The effect depends on the border-color value

<div style=”border: 5px outset #F0F; padding: 3px;”>Your Text here…</di>

Don’t forget </div> to close it.