11 comments
Add yours »

How To Create Dashed Borders And More

January 10th, 2008

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.   

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px dashed; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px dashed; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px dashed">
<p align="center"><strong>Dashed Border</strong>&nbsp;</p>
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. &nbsp;
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px dotted; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px dotted; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px dotted; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px dotted">
<p align="center"><strong>Dotted Border</strong>&nbsp;</p>
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.
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px double; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px double; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px double; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px double">
<p align="center"><strong>Double Border</strong>&nbsp;</p>
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.
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px groove; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px groove; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px groove; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px groove">
<p align="center"><strong>Grooved Border</strong>&nbsp;</p>
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.
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px ridge; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px ridge; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px ridge; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px ridge">
<p align="center"><strong>Ridged Border</strong>&nbsp;</p>
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.
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px inset; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px inset; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px inset; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px inset">
<p align="center"><strong>Inset Border</strong>&nbsp;</p>
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.
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px outset; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px outset; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px outset; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px outset">
<p align="center"><strong>Outset Border</strong>&nbsp;</p>
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.
</div>

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. 

1
2
3
4

<div style="BORDER-RIGHT: #cc0000 5px solid; PADDING-RIGHT: 10px; BORDER-TOP: #cc0000 5px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc0000 5px solid; WIDTH: 90%; PADDING-TOP: 10px; BORDER-BOTTOM: #cc0000 5px solid">
<p align="center"><strong>Solid Border</strong>&nbsp;</p>
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.
</div>

Technorati Tags: , ,

Like this post? Think it'll help someone else? Want to save it? Click here => Share This to Digg, Stumble or bookmark it.

Related Entries

Both comments and pings are currently closed.

11 Comments to “How To Create Dashed Borders And More”

  1. Alex Newell Says:
    January 10th, 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 Says:
    January 10th, 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 Says:
    January 11th, 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 Says:
    January 14th, 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 Says:
    January 15th, 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 Says:
    March 3rd, 2008 at 3:27 pm

    YAY! What a great gift. Bookmarked!

  7. Lynette Says:
    March 3rd, 2008 at 3:37 pm

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

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

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

  9. Lynette Says:
    March 18th, 2008 at 8:18 am

    Hey Kathy, have fun with them! :)

  10. Jack Says:
    April 5th, 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 Says:
    April 7th, 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.

Close
E-mail It