Decorative Borders with only CSS and No Images

Share this on:

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.

green polka dot background

Each decorative element is shown first as an image, so you can see the effect, regardless of your 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.)

black beadec border
 

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-top.
  • 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.

gray beaded double border
 

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.

green beaded top and bottom borders
 
.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.

blue chain link borders
 

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.

double border with shadows
 
.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!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

15 responses to “Decorative Borders with only CSS and No Images”

  1. PJ ~ Pixelyz Web Services Avatar

    Awesome effects! Just the kind of creativity that makes the internet a better place. Thank you for sharing!

    1. Marcy Diaz Avatar

      You’re welcome, PJ! Thanks for stopping by.

  2. Barb Avatar
    Barb

    That is VERY cool!
    Thank you very much.

    1. Marcy Diaz Avatar

      You’re welcome, Barb!

  3. Monty Veda Avatar

    That’s awesome… I was looking for tips on how to jazz up my CSS bordsers without using images and i found it, right here, right now! Thank you :)

    1. Marcy Diaz Avatar

      You’re welcome, Monty. Thanks for taking the time to let me know!

  4. Livia Avatar

    Hi, Really nice ideias!
    However, I’m having difficulties in finding the correct spot to insert the CSS code.
    I’m currently editing a previous template, that has a black 1px line, on both top and bottom of the menu bar.

    Not sure how to over write or substitute for the nav-primary code. Substituting “solid” with dotted did not work either. Any suggestions?

    1. Livia Avatar

      Managed to fix it : )

    2. Marcy Diaz Avatar

      I’m glad it all worked out for you, Livia! Thanks for letting me know.

  5. Chris Avatar

    This is what i was looking for ! Thanks Marcy :)

    1. Marcy Diaz Avatar

      I’m glad it helped, Chris!

  6. Kennedy Chongwo Avatar
    Kennedy Chongwo

    Fantastic css effects, thanks for sharing.

    1. Marcy Diaz Avatar

      Thank you, Kennedy!

  7. Steve Avatar
    Steve

    Very creative and useful. It really shows your command of CSS3. I am very impressed!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.