How to Get Rid of Rounded Corners with CSS3

I don’t know about you, but I feel the rounded corner fad in web design is dying out.

Rounded corners will always have a place, but it’s with the introduction of border-radius in CSS3, that it got out of hand. I think the problem lies in the fact that what can make any design poor, is the lack of subtlety. It’s easy to overdo rounded corners to make a design look just plain goofy.

If you have a theme you like, aside from the rounded corners or need to remove rounded corners from a project that would otherwise be an endless hunting down of classes and ids and testing specificity to kill them all, here’s the quick and dirty way with CSS3 to wipe them out completely in one shot:

*{border-radius:0 !important}

(* is a wildcard that essentially means everything, all divs, paragraphs, classes, ids, etc.)

Not at all an elegant solution, but drop that in your stylesheet and we’ll have our glorious, timeless, classic, never out-of-style, ninety-degree, wonders of symmetrical goodness corners right back where they should be.

  • Emma

    Thank you for this!! I’d been looking for ages and your code worked perfectly :) thanks again!