If I knew it was that easy… finally rounded corners

If I knew it was that easy my corners would of been rounded when I made the site! I was just poking around the web a week or so back and found an article on “moz border” and “webkit”, turns out you just add this to your CSS and boom you have rounded corners, at least in Safari, FireFox and Chrome. Since I do not do web sites for a living and don’t have customers, I can for now…. forget IE and most importantly IE6 for now. I have too much other stuff on my plate right now to worry about IE work-arounds. (then today, I find out thru twitter that IE6 still has 25% of the browser market locked up!……. why don’t these people upgrade?)

So, here is how my CSS looks to get my rounded corners:


#sidebar ul li a:hover {
background-color: #046380;
color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px; }

#sidebar h3.sidebar {
background-color: #a7a37e;
color: white;
margin: 4px 4px 4px 4px;
padding: 4px 2px 2px 2px;
letter-spacing: 2px;
font-size: 1em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */}


So overall it’s incredibly easy to get rounded corners at least in three browsers. I was initially thrown because the information I first saw about rounded corners was all about placing four small pictures into your css with the background tag. Seemed to much at the time. Now you can just download a CSS Snippet over at css-tricks.com and paste it right into your css. Chris has now got a great selection of snippets that you can download right into Coda or TextMate, really saves a lot of time typing and having to remember the syntax. In my last state of learning update I talked about switching over to my new Text Editor that I’m in love with Coda. If you’ve never checked it out, download it, you won’t be sorry. Great Product.
Here is the exact snippet of what gets pasted into your CSS, just fill in your radius Xpx number, 10 is set by default in the snippet:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */


Now, go round some corners before they go out of style! ; )

Tagged as: CSS, rounded corners