I know this isn’t a new trick but I’ll post it anyway for my own records, and anyone else that may find it useful. As shown below you can add a few lines of code to your stylesheet(s) and get round corners on almost any style element that supports borders.
CSS rounded corners code
.corners {
-moz-border-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
As you can see the first line is specifically for Firefox, the next 4 for Safari/Chrome and the last 4 for any browser that fully supports CSS3.
The reason for keeping it separate is that you can add it like a second class to any style reference you are using within your HTML mark-up. For example, if you have defined the following styling to your submit button:
input.send {
font:1.5em Arial, Helvetica, sans-serif;
font-weight: bold;
color:#eff;
background: #036;
border: 1px solid #369;
height:30px;
cursor:pointer;
}
input.send:hover {
border: 1px solid #036;
}
Then you can add the following to get the desired result:
<input class="send corners" type="submit" value="Send" />
I’ll leave it with you to see the end result 🙂
Known limitations
It may come as no surprise that this effect isn’t visible in Internet Explorer. At least not on any versions I’ve tried. If you believe it is please let me know what version you are running, but for any version below 8 it definitely isn’t showing.
Conclusion
I believe it’s a nice little extra styling option that saves you the trouble of creating graphics for some parts of your site to get the desired effect. And although it isn’t supported by all browsers and versions it falls back nicely to standard borders so there’s really nothing to worry about.
Please feel free to share cool effects and additional tricks if you know any. I’d love to see what can be done using only CSS!
About Author
