[jQuery] Border Radius

Results 1 to 10 of 10
  1. 29-03-13 #1
    Markshall
    Web Developer Markshall is offline
    MemberRank
    Oct 2009 Join Date
    EnglandLocation
    628Posts

    [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>
    Reply With Quote Reply With Quote
  2. Check out our sponsor
    [jQuery] Border Radius
  3. 29-03-13 #2
    Gangnam
    Web & Interaction Design Gangnam is offline
    MemberRank
    Dec 2010 Join Date
    Lincoln, UKLocation
    1,983Posts

    Re: [jQuery] Border Radius

    Good idea I suppose - but it's only really two lines you need now (border-radius, -moz-border-radius).
    Reply With Quote Reply With Quote
  4. 29-03-13 #3
    Markshall
    Web Developer Markshall is offline
    MemberRank
    Oct 2009 Join Date
    EnglandLocation
    628Posts

    Re: [jQuery] Border Radius

    Quote Originally Posted by n0minal View Post
    Good idea I suppose - but it's only really two lines you need now (border-radius, -moz-border-radius).
    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
    Reply With Quote Reply With Quote
  5. 29-03-13 #4
    Komakech
    Google my name... Komakech is offline
    MemberRank
    Nov 2011 Join Date
    EnglandLocation
    528Posts

    Re: [jQuery] Border Radius

    Quote Originally Posted by n0minal View Post
    Good idea I suppose - but it's only really two lines you need now (border-radius, -moz-border-radius).
    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.
    Reply With Quote Reply With Quote
  6. 29-03-13 #5
    Gangnam
    Web & Interaction Design Gangnam is offline
    MemberRank
    Dec 2010 Join Date
    Lincoln, UKLocation
    1,983Posts

    Re: [jQuery] Border Radius

    Quote Originally Posted by m0nsta. View Post
    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!

    Quote Originally Posted by Komakech View Post
    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!
    Reply With Quote Reply With Quote
  7. 31-03-13 #6
     TimeBomb 
    Software Person TimeBomb is offline
    ModeratorRank
    May 2008 Join Date
    United StatesLocation
    1,252Posts

    Re: [jQuery] Border Radius

    I'd much rather just use classes themselves to do this. I mocked something up for you.
    Last edited by TimeBomb; 31-03-13 at 02:22 PM.
    Reply With Quote Reply With Quote
  8. 31-03-13 #7
    Markshall
    Web Developer Markshall is offline
    MemberRank
    Oct 2009 Join Date
    EnglandLocation
    628Posts

    Re: [jQuery] Border Radius

    Quote Originally Posted by TimeBomb View Post
    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
    Reply With Quote Reply With Quote
  9. 01-04-13 #8
    Gangnam
    Web & Interaction Design Gangnam is offline
    MemberRank
    Dec 2010 Join Date
    Lincoln, UKLocation
    1,983Posts

    Re: [jQuery] Border Radius

    Quote Originally Posted by TimeBomb View Post
    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.
    Reply With Quote Reply With Quote
  10. 01-04-13 #9
    Justei
    Alpha Member Justei is offline
    MemberRank
    Oct 2007 Join Date
    /f241Location
    1,904Posts

    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 :).
    Reply With Quote Reply With Quote
  11. 02-04-13 #10
     TimeBomb 
    Software Person TimeBomb is offline
    ModeratorRank
    May 2008 Join Date
    United StatesLocation
    1,252Posts

    Re: [jQuery] Border Radius

    Quote Originally Posted by n0minal View Post
    A nice approach, but regardless - I prefer to apply everything in the stylesheet. For me, it makes no odds.
    Definitely. Using javascript instead of a few extra lines of CSS is not a good idea.
    Reply With Quote Reply With Quote


« Previous Thread | Next Thread »

Advertisement