So you’ll probably have noticed, things have gotten a little more curved on here recently. That’s because I’ve spent a bit of time over the past few days getting the website to display curved corners, using the CSS3 Border Radius property.
I have made use of three CSS styles, two of which are browser specific, running only in WebKit and Mozilla based browsers, whilst the third is a general CSS term, which SHOULD be readable by any web browser available at the moment.
The code which is meant to be accessible across all of the browsers is;
In addition to this piece of code, and mainly added to deal with legacy browsers, or browsers which do not quite support all of the CSS3 variables natively, the following pieces of code are used;
WebKit based browsers use:
Whilst Mozilla based browsers
make use of;
So you can see, it’s quite a simple process to add curved corners, and fortunately doesn’t require the up to 9 images which used to be required in order to add something which has always been seen as such as simple design element, and the main reason websites used to be built in flash by website designers who could not get their HTML code to look like their designs.
Are you interested, or want your website to make use of the CSS3 border radius property? Send me a message and let’s have a chat about what I can do to improve your website.