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! ; )

Have not played with this yet, but researched it a little bit and wanted to drop a quick note about a good starting place. Basically it sounds like you can use JavaScript to round your corners and it works in all the major browsers. In your CSS you can use -moz-border-radius: Xpx, Xpx, Xpx, Xpx; to round your corners but it only works in in Firefox. You can use -webkit-border-radius: Xpx, Xpx, Xpx, Xpx; and this works in Safari. So the choice is yours, use JavaScript once and it works for all browsers or use both -moz and -webkit and forget about IE.

Good short video to watch this all in action here.
Scroll down to bottom video, it’s called how to make rounded corners with CSS and JavaScript.

Complete run-down from Mozilla Development Center here.

Better get learning how to round corners!

This one was fun! I really enjoyed it and it got me playing around with some new skills, using a background image in CSS, using absolute positioning and using Photoshop to make a custom background. Well here is how to start (all this stuff is not from me, I use the tutorials from really talented people who take the time to spell everything out, I wish I had the skill to do full out tutorials….. maybe someday!) this tutorial from Chris Coyier “How To Make a Unique Website For Your Twitter Updates” is from May 16, 2008. The only thing that has changed is the twitter code that you cut and paste. Twitter now gives you a script that you cut and paste that has some styling to it already, so you can’t just have the tweets with no styling. Chris uses just the raw twitter feed and then uses CSS to customize everything. I could not find a way to just get the raw feed, so I adapted and used there script and just put it inside of my own box. This is actually really good, it makes you think and adapt to a problem…… do some styling in the twitter widget, some styling in your PS custom background and then finally in the CSS, there is a million different ways you could do this tutorial to adapt it to your Web site.

Here are the links to the pages that you will need:

• Tut: How To Make a Unique Website For Your Twitter Updates
• Twitter Widget Page
• Link to a whole bunch of free twitter birds to download and use

Here are the finished custom Twitter pages:

• Chris Coyier Example Twitter Page From Tutorial
• Custom Twitter Page That I Made
• Here is my Photoshop background that I made
• Here is the CSS that I used

Overall this was a great tut and I recommend you dive into this one. Let me know what you think and give me a link to your custom twitter page!

I’m going to list and rate books on occasion that I have read cover to cover or have used extensively for reference and tell you whether it’s worth a buy or not to waste your money. Now is a good time to get acquainted with O′Reilly Books if your new at this stuff your going to need some good learning and reference books and this is the place to get them.

I have bought stuff from Amazon for years but I have found that for technical books O′Reilly can′t be beat and here is why. You can purchase a bundle and get the book in three different formats and this has been a huge help for me. The first format mobi is for the kindle so when I′m on the road I have all my technical books with me and don′t have to actually lug around all 185 pounds of books. Laying in bed reading is also much easier with the kindle verses holding a large book. The next format is pdf for the computer, this is a huge help for having the book open on your computer so you can cut and past code out of it or do a quick search to find the exact spot within this 800 plus page book that your looking for. When your doing lessons out of the books it′s nice to have your project open with the book right along side for quick and easy reference. With pdf you can also highlight paragraphs, make bookmarks and add notes. The third format is epub for your iPhone, I use the application Stanza to load all my books and this is a nice place to have them if you spend much time on the road. I am constantly sitting in an airport reading ahead and absorbing material to put to use later.

Head First HTML/CSS

Head First Web Design

CSS Reference Book

HTML Reference Book