The personal website of Chris Coyier

Individual Rounded Corners for Mozilla and WebKit

I use vendor-specific CSS extensions for all my rounded corners these days. Doesn’t require extra markup or javascript so it’s as lightweight as any other CSS attribute. Doesn’t work in IE but it degrades to square corners, big deal.

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

What always confuses me though, is how to round individual corners. The syntax for WebKit and Mozilla are slightly different. I always find myself doing Google searches trying to figure out the exact syntax, so I’m writing this here mostly for my own self reference.

.box {
  -moz-border-radius-topleft: 8px; 
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomleft: 8px;
  -moz-border-radius-bottomright: 8px;
  -webkit-border-top-right-radius: 8px; 
  -webkit-border-top-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
}