Category: Buzz

Images, Videos, Events, PR and General Technology/Web news.

Curving Pixels

I Like Curves

Too many websites are still nothing but straight lines and 90 degree angles. I enjoy sites with rounded curves though.

Straight lines are just boring.
When working on a website, one of the first things that I add is a CSS rule similar to : .curvy { border-radius:20px; }
I also add something like: .curvysmall { border-radius:10px; }
As I design a site, I can then add a couple of different sizes of curves using either of the two CSS classes above.
Did I mention that I like curves? I love border-radius.
If you’re new to CSS, border-radius allows us to add rounded corners to elements.
Adding .curvy or .curvysmall to an img or div adds a nice visual touch. Toss in a border too if you are inclined.

        .curvy {
            border-radius:20px;
            border:1px solid #555;
            }
        

The above example adds curves to all four corners of an element. You can dig deeper into this property by reading. Border-radius: create rounded corners with CSS!
If you just want a generator for this, check out: http://border-radius.com/. Just add whatever size of pixels you want to use in the boxes along the corners and watch the effects. Copy and paste the code where you want to use it.

The HTML side might end up looking something like this:

    <div class="curvy">
    <img>
    </div>

The green border around this blog is an example of some curving.
Maybe, it’s just me, but rounded corners are just more appealing. I do tend to sprinkle this CSS style around my sites a bit liberally though.
I hope you don’t mind the extra curves.