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;
}
Thoughts?
Email me or comment below.
Also CodePen PRO is quite a deal. 🙏
Kool, this means that the generic 2 round 2 square (opposites) corners are possible, like half of the web designers logos are. =P
Yes i also find myself going to css3.info every time i need to add individual rounded corner values for Safari & Firefox.
Still wondering why its STILL not there in Opera, while it so nicely supports font-shadow.
I will never understand whats in there in a browser developer’s mind.
But you’re not ignoring rounded corners for IE/Opera/whatever when you’re doing work for a client, right? Or do you try to persuade them to see it as they probably should, making the markup smaller in size (less divs and whatnot) and letting the browser doing it’s work as intended.
I really like to know when IE will fix all the problems about css…
I cannot do RoundConners in IE without Images or Frameworks Plugins.