[jQuery] Border Radius

If you're a web developer, you're probably familiar with the border-radius feature in CSS3. In my opinion, it's a complete pain in the ass to write 5 lines of code to achieve the effect of curved borders, so I wrote a little JavaScript code that will do it for you.

It only took me 2 minutes so I don't really care about sharing it. Use as you wish.

Usage is very, very easy.

It can be used on any element on a web page and can be extended to support specified areas of the border, such as top-left etc if you have the time to do so.

Code:

<!DOCTYPE html> <html> <head> <title>JavaScript Border Radius</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function(){ $("[data-border-radius]").each(function(i,a){ var br = $(a).attr("data-border-radius"); if ($.isNumeric(br)) { $(a).css({ "border-radius": br + "px", "-webkit-border-radius": br + "px", "-moz-border-radius": br + "px", "-o-border-radius": br + "px", "-khtml-border-radius": br + "px" }); } }); }); </script> </head> <body> <h3>Original</h3> <div style="background-color: #000000; height: 100px; width: 100px;"></div> <hr /> <h3>JavaScript edit</h3> <div style="background-color: #000000; height: 100px; width: 100px;" data-border-radius="10"></div> </body> </html>

Re: [jQuery] Border Radius

Good idea I suppose - but it's only really two lines you need now (border-radius, -moz-border-radius). :P:

Re: [jQuery] Border Radius

Quote:

Originally Posted by n0minal

Good idea I suppose - but it's only really two lines you need now (border-radius, -moz-border-radius). :P:

I guess so but I'm not a fan of inline-styling as I find it ugly and I often cba to open my CSS file just to create a new rule for it. :p

Re: [jQuery] Border Radius

Quote:

Originally Posted by n0minal

Good idea I suppose - but it's only really two lines you need now (border-radius, -moz-border-radius). :P:

Not entirely true, in all the latest browsers CSS3 in supported to allow border-radius to work globally on all browsers, but this isn't the case for older browsers.

-moz-border-radius is for Mozilla Firefox while -webkit-border-radius is WebKit for Safari.

So actually it is required to keep the extra ones in at all times until you can guarantee that 100% of the users who visit your website have a browser that supports CSS3.

This is a good function, nice little addition to those who constantly set border radius' on their sites.

All the best,
Richard Komakech.

Re: [jQuery] Border Radius

Quote:

Originally Posted by m0nsta.

I guess so but I'm not a fan of inline-styling as I find it ugly and I often cba to open my CSS file just to create a new rule for it. :p

I'm not suggesting inline styling, aha - that is a no-go! :P:

Quote:

Originally Posted by Komakech

Not entirely true, in all the latest browsers CSS3 in supported to allow border-radius to work globally on all browsers, but this isn't the case for older browsers.

-moz-border-radius is for Mozilla Firefox while -webkit-border-radius is WebKit for Safari.

So actually it is required to keep the extra ones in at all times until you can guarantee that 100% of the users who visit your website have a browser that supports CSS3.

This is a good function, nice little addition to those who constantly set border radius' on their sites.

All the best,
Richard Komakech.

I'm aware - but I'm sure they're at a stage (minus IE) where they simply support 'border-radius'. Regardless, you're likely to need to implement some kind of fallback for older browsers unless you want to leave a majority (makes me cry, too) in the dark!

Re: [jQuery] Border Radius

I'd much rather just use classes themselves to do this. I mocked something up for you.

Re: [jQuery] Border Radius

Quote:

Originally Posted by TimeBomb

I'd much rather just use classes themselves to do this. I mocked something up for you.

Yeah that looks nice tbh. I look forward to seeing your posts tbh lol.

But, mine does the same thing and is less code tbh :p

Re: [jQuery] Border Radius

Quote:

Originally Posted by TimeBomb

I'd much rather just use classes themselves to do this. I mocked something up for you.

A nice approach, but regardless - I prefer to apply everything in the stylesheet. For me, it makes no odds. :P:

Re: [jQuery] Border Radius

It's a nice trick and all, I just preffer having a nicely and well structured .css file instead and always keep that stuff in there instead though. I also try not to use Javascript in cases like this when it might not be necessary :).

Re: [jQuery] Border Radius

Quote:

Originally Posted by n0minal

A nice approach, but regardless - I prefer to apply everything in the stylesheet. For me, it makes no odds. :P:

Definitely. Using javascript instead of a few extra lines of CSS is not a good idea.