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.
