Decorative Borders with only CSS and No Images

This tutorial is a bit of fun and shows you how to create chain link and beaded decorative borders and backgrounds for your HTML or WordPress website using only CSS and no images which can mean faster loading times for your website. All the CSS can be added to your child theme style.css or to a custom CSS editor plugin.


Each decorative element is shown first as an image, so you can see the effect even if you have an older browser, and then using the code live in browser.

Decorative Beaded Border

This is a large, bold version of the beaded border. It can be used as a bottom border or page divider. You can add the border perhaps at the bottom of the main container section of your theme (.wrapper in Twenty Twelve or .site-inner in Genesis), but you could also add subtle versions to .widget or .entry-content, or .post, depending on your theme.
(Note that in Chrome and Safari, a “dotted” border is made of “square” dots, but in Firefox, the “dotted” border is made of circles.)

The CSS for a beaded border-bottom is:

.wrapper {
	border-bottom: 7px dotted #000;
	box-shadow: inset 0 -3px 0 0 #000, 0 3px 0 0 #000;
}

The CSS for beaded border-top is:

.wrapper {
	border-top: 7px dotted #000;
	box-shadow: inset 0 3px 0 0 #000, 0 -3px 0 0 #000;
}

They look the same, but the CSS is a bit different. This is an explanation of the CSS, so you can try for yourself.

• This is for border-bottom or border-bottom.
• 7px is the border dot size, which is fairly large.
• The border is dotted.
• #000 is the color black; you can use any color here.
• The box-shadow style adds 3px black (#000) lines above and below the dotted border.

Decorative Beaded Top and Bottom Borders

The next example is a double (top and bottom) beaded border in light gray, which is a more subtle effect. You can add this beaded border to the top and bottom of a container, like the top and bottom of your navigation menu, or top and bottom of a page or post.

Here is the CSS.

.nav-primary {
	border-top: 3px dotted #e5e5e5;
	border-bottom: 3px dotted #e5e5e5;
	box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
	margin-bottom: 1px;
}

The bottom margin of at least 1px is needed or one of the thin lines won’t show.

Green Decorative Beaded Top and Bottom Borders

This is the same beaded border CSS, but with a light green background and black borders; the image is enlarged.

.nav-primary {
	background-color: #cde364;
	border-top: 3px dotted #000;
	border-bottom: 3px dotted #000;
	box-shadow: inset 0 -1px 0 0 #000, inset 0 1px 0 0 #000, 0 1px 0 0 #000, 0 -1px 0 0 #000;
	margin-bottom: 1px;
}

Chain Link Decorative Borders

The next decorative effect is a chain link border. The top border is wider than the bottom, so you can see two different effects at once. These use a dashed border.

Here is the CSS.

.nav-primary {
	border-top: 2px dashed #046ca3;
	border-bottom: 1px dashed #046ca3;
        box-shadow: inset 0 -1px 0 0 #046ca3, inset 0 1px 0 0 #046ca3, 0 1px 0 0 #046ca3, 0 -1px 0 0 #046ca3;
	margin-bottom: 1px;
}

Here is an explanation of the CSS.

• This is again for border-top and border-bottom.
• 2px is the top border size; 1px is the bottom border size.
• The borders are dashed this time.
• #046ca3 is the blue color.
• There are again 4 sets of box-shadows to make thin 1px lines above and below the dashed borders.
• A margin-bottom of at least 1px is needed or part of the thin lines won’t show.

Subtle Triple Border with Shadow

This is a nice triple border effect for around a post or the entire page container that uses only two lines of CSS. There is an inner dashed border with an outer solid border and also a subtle shadow. The image is enlarged.

.wrapper {
        border: 1px dashed #ddd;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ddd, 0 0 0 10px #fff, 0 0 2px 10px #eee;
}

Dotted Background

The last one is a dotted background. This one is modified from the polka dot pattern from Lea Verou’s CSS Pattern Gallery where there are many more CSS only Patterns.
The image is at the top of this post.

The CSS is:

body {
	background-color:#cde364;
	background-image: radial-gradient(#fff 10%, transparent 10%),
	radial-gradient(#fff 10%, transparent 10%);
	background-size: 30px 30px;
	background-position: 0 0, 15px 15px;
}

The color #fff in two lines created the white polka dots; the color #cde364 is the green background. Change these as you like.

Let me know where you’ll use these fun CSS decorative borders and background!