• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles

Decorative Borders with only CSS and No Images

March 11, 2014 Updated on December 3, 2020 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail

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!

Share this post:

TwitterFacebookPinterestLinkedInEmail

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. PJ ~ Pixelyz Web Services says

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

    Reply
    • Marcy Diaz says

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

      Reply
  2. Barb says

    That is VERY cool!
    Thank you very much.

    Reply
    • Marcy Diaz says

      You’re welcome, Barb!

      Reply
  3. Monty Veda says

    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 :)

    Reply
    • Marcy Diaz says

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

      Reply
  4. Livia says

    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?

    Reply
    • Livia says

      Managed to fix it : )

      Reply
    • Marcy Diaz says

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

      Reply
  5. Chris says

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

    Reply
    • Marcy Diaz says

      I’m glad it helped, Chris!

      Reply
  6. Kennedy Chongwo says

    Fantastic css effects, thanks for sharing.

    Reply
    • Marcy Diaz says

      Thank you, Kennedy!

      Reply
  7. Steve says

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

    Reply
    • Marcy Diaz says

      Thanks, Steve!

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!