How To Create Dashed Borders And More

This is one of those things that you think everyone already knows but turns out, that’s so wrong. Anyhow, there’s a neat little thread inside MomMasterminds about creating dashed borders which some members found really cool. It occurred to me then, that many don’t know about all the nifty borders you can make with CSS. So, here are some examples complete with copy and paste code at the bottom of each example.

Hint for those new to CSS. You can copy the style=”” part and put it your tables, paragraphs or even image tags.

Dashed Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.  

Dashed Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.  

Dotted Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Dotted Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Double Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Double Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Grooved Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Grooved Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Ridged Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Ridged Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Inset Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Inset Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Outset Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Outset Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Solid Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Solid Border 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra fringilla sem. Sed quis mi sit amet urna euismod laoreet. In ut metus ut risus dapibus varius. Vivamus euismod quam sed orci.

Technorati Tags: , ,

Do You Want A Hands-Free Business?

Then get this guide to help you systemize your business so you'll have more time working on your business.

!
!

Hey! I want to make sure you know what you're getting here. In addition to the guide, you will also receive our memo that includes special offers, announcements and of course actionable information.

Terms and Conditions checkbox is required.
Something went wrong. Please check your entries and try again.
Facebook Comments

11 Comments

  1. Alex Newell on January 10, 2008 at 2:51 pm

    Thanks so much Lyn. As very much a “non techie” this is exactly the kind of thing that I appreciate.

    🙂

    alex



  2. Lynette on January 10, 2008 at 4:43 pm

    Hey Alex, you’re welcome. I’ll remember that and try to put in more posts like this when I work on my new blog posts.



  3. Rick Butts on January 11, 2008 at 3:07 pm

    Hey Lynette,

    Great post – very helpful.

    It is amazing how valuable something like this is. I’ve already forwarded this URL to a friend – and was going to bookmark the page as a resource.

    But, then I thought I should put up a post on MY blog with a trackback permalink to you – so that’s what I think I’ll do.

    Let ya know (well, you’ll know!)

    Rick



  4. polly peirce on January 14, 2008 at 7:03 pm

    Lynette, this is so cool. Thank you very much for this info, as it will definately liven up any sites or blogs I might be playing with, especially as I amdefinately not a techie.



  5. Lynette on January 15, 2008 at 9:47 am

    Hey Rick, thanks! Looking forward to that trackback.

    Hello there Polly, ya don’t have to be techie to experiment 🙂 glad it’s helpful



  6. Annette on March 3, 2008 at 3:27 pm

    YAY! What a great gift. Bookmarked!



  7. Lynette on March 3, 2008 at 3:37 pm

    Thanks Annette, I am beginning a series of how code snippets. You can find more fun code here: https://techbasedmarketing.com/blog/category/how-tos



  8. Kathyjoe on March 17, 2008 at 10:26 pm

    Thanks Lynette! I am going to try to create one of these this weekend. Thankyou!



  9. Lynette on March 18, 2008 at 8:18 am

    Hey Kathy, have fun with them! 🙂



  10. Jack on April 5, 2008 at 1:18 pm

    Hi Lynette,
    Great stuff.

    You set the width as 90% – which makes it 90% of the size of the page (or table, etc) that the box is in. Is there a way to set it to automatically fit around whatever you put in it (I put a snippet of code in one – see here – http://www.lightningwp.com) I had to set it at a fixed 320px. But I would rather have it automatically fit the contents.

    Thanks
    Jack



  11. Lynette on April 7, 2008 at 2:03 pm

    Hey Jack, yes I set it at 90% since I wasn’t sure what it will be applied to and % is *usually* more gentle on a wide variety of design.

    For your case, the HTML doesn’t have a ‘container’ with a fixed width. What I normally do for center aligned HTML like that is set a container to hold all the content then decide if I want that to be fixed or fluid width.

    Then drop the ‘box’ with borders in, that should scale properly.