Wednesday, October 3, 2012

Get single corners rounded with CSS3

There are a lot of posts about making rounded corners with CSS3. But, I haven't found a good, compact one about how to do it only with one corner and as cross-browser friendly as possible.

So, this little post is to remind myself (and others) how to do it. The code is not so short considering what I would like to achieve...there quite a few rows for this task...but, let's talk code:

-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
border-top-left-radius: 10px;

I have also added a little macro to my Netbeans install like this:

rclt: (rounded corners left top)
-moz-border-radius-topleft: ${VAR}px;
-webkit-border-top-left-radius: ${VAR}px;
-khtml-border-top-left-radius: ${VAR}px;
border-top-left-radius: ${VAR}px;${cursor}

rcrt: (rounded corners right top)
-moz-border-radius-topright: ${VAR}px;
-webkit-border-top-right-radius: ${VAR}px;
-khtml-border-top-right-radius: ${VAR}px;
border-top-right-radius: ${VAR}px;${cursor}

And so on...