Code Snippets: Styling A Content Box

One of my favorite ways to pretty up some content is it create a dashed box. Here is a simple version that can be easily customized to match your theme.

/* Dashed Box */
#boxstyle {
background: #fff url();
width: 80%;
border-radius: 50px;
padding: 25px;
margin: 0 auto;
border: #333333 1px dashed;
}

Put this code in your Blogger Template by going to Theme > Customize > Advanced > Add Custom CSS.

Then to add it around specific content, create a div with the id boxstyle:

<div id="boxstyle">
Content goes here.
</div>

Background:

You can change the background color or even add a background image if you'd like. It's best to lower the opacity of the image in an editing program first so the text in the box is more readable.

Width:

This sets the width of the area. It doesn't include padding, borders, or margins which we'll get to shortly. I like to set the width of the box a bit smaller than the rest of the content such as 50% to 80% to keep the text more compact and have it stand out from the rest of the content more.

Border Radius:

This gives the rounded corner look. You can adjust this number to your liking or remove this bit of code if you'd prefer.

Padding:

This sets the padding area on all four sides of the element; the space between the text and the border.

Margin:

By using 0 auto, it centers the whole box on your page. If you prefer to not have it centered, you can remove this bit of code.

Border:

Change the border color, border width, and border style here. There are several other border styles to choose from such as solid, dotted, double, or grove.