This post was originally written by me for the WebAssist blog. I’m re-posting it here because it will setup a blog post for next week.
Rounded corners are quite common these days across lots of websites. They are definitely appealing and help change it up from the normal square boxes a browser renders by default.
There are several techniques to create rounded corners (i.e. nest 4 divs and have a corner image aligned in each one), but my favorite by far is using the new CSS3 border radius property. Essentially, you can just use a few lines of CSS and create awesome looking rounded corners for an element on your webpage. In fact, I use this CSS3 technique all over something cliche.
Have you ever noticed those sweet blue outlines around input fields when using Safari? Something that looks like this?