Saturday, May 12, 2012

Simple Tutorial on Borders in CSS


Well, here we are again! Today, I'm doing a very, very easy tutorial! This one includes a version of CSS border codes. Very easy to edit!

   CSS Borders:
border:2px solid #000066;
border-bottom:2px solid #000066;
border-width:2px 2px 2px;
border-bottom:2px line #000066;
 How to Edit: 
   2px- Thin line. Edit to your desired thickness. I like 2px, if it is around blog posts and such, but if you are doing various things- various thickness's are required! ;)
   solid: This is one continuous line. You can swap out the word "solid" for "dotted" and "dashed"- creating those effects! Really fun!
   #000066: This is a midnight blue color. Of course, you can swap this out for any other hex code. (I like http://www.colorpicker.com/.)  Make sure, whatever you do... that you don't forget this: # before the numbers. Or it won't work. :)

---
More Advanced Techniques:

   Specific Borders: When designing blogs, sometimes you just want one border- let's say, above your post footer. You want it thin and dotted, just above your comments. That's easy... just under your blog footer code, add:
border-top:1px dotted #000000;
"Top" can be swapped out for "bottom" and "right" and "left", thus creating a myriad of options to play with!

   Rounded Border Edges:

border-radius:10px;
-moz-border-radius:10px;
 The -moz part is to make sure it works in Mozilla Firefox. To create specific rounded borders, use this technique:

border-top-left-radius:10px;
-moz-border-left-radius:10px;

You can, again, swap out "top" for "bottom" and "left" for right. "10px" can be changed anyway you like it.

---
I think this just about covers everything! Thank you all for your encouraging comments and emails, they keep us going! :) 

3 comments:

  1. Ah! You guys need to keep making tutorials! I've found them so helpful :) Also, if you guys see this, how would I get borders between my gadgets so that they all seem separated? Thanks!

    ReplyDelete
    Replies
    1. It's nowhere in my inbox :( But I did figure it out through your other tutorials by installing the minima template! :D

      Delete