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.
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.
Thanks so much Lyn. As very much a “non techie” this is exactly the kind of thing that I appreciate.
🙂
alex
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.
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
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.
Hey Rick, thanks! Looking forward to that trackback.
Hello there Polly, ya don’t have to be techie to experiment 🙂 glad it’s helpful
YAY! What a great gift. Bookmarked!
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
Thanks Lynette! I am going to try to create one of these this weekend. Thankyou!
Hey Kathy, have fun with them! 🙂
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
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.