Border Radius

[Rafael Raposo]

Hello,

I don't know what you think about border radius right now, but as it is not totally cross plataform yet, I managed to create a function to set it almost cross plataform, BUT, not in IE htc file hell stuff.

(function() {

    var borderRadius = {

        _all:        $w("borderRadius MozBorderRadius webkitBorderRadius"),

        topLeft:     $w("borderTopLeftRadius MozBorderRadiusTopleft webkitBorderTopLeftRadius"),

        bottomLeft:  $w("borderBottomLeftRadius MozBorderRadiusBottomleft webkitBorderBottomLeftRadius"),

        topRight:    $w("borderTopRightRadius MozBorderRadiusTopright webkitBorderTopRightRadius"),

        bottomRight: $w("borderBottomRightRadius MozBorderRadiusBottomright webkitBorderBottomRightRadius")

    };

    function setBorderRadius(element, borders) {

        var realBorders = {};

            if(Object.isString(borders)) {

                borders = {_all:borders};

            }

            for(var border in borders) {

                borderRadius[border].each(function(borderTranslate){

                    realBorders[borderTranslate] = borders[border];

                });

            }

            element.setStyle(realBorders);

            return element;

    }

    Element.addMethods({

        setBorderRadius: setBorderRadius

    });

})();

It accepts arguments like:

$("id_element").setBorderRadius("30px");

$("id_element").setBorderRadius({topLeft:"30px", bottomRight:"30px"});

In fact I may not be aware of how to deal with rounded borders for the present state, but this function just helped me a little so it may help some of you.

Cheers

Rafael

[joe t.]

This is nice as a basic-level script to apply border-radius on
browsers that support it. That said, it's missing a couple things:
Webkit (and/or Opera?) supports two radius arguments for each corner,
which allows the corner to be morphed into a more oval shape. To my
knowledge, Firefox doesn't support that yet.
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

Since the function doesn't provide a cross-browser solution for IE,
and doesn't fully support what each of the other browsers can do, my
guess is this will have a hard time getting into the Core. But that
doesn't detract from its usefulness as a quick utility function.

Maybe the devs have some ideas for broadening the capabilities for it,
though.
-joe t.

[Rafael Raposo]

Yes, unfortunately I know it can't go into the core as it does not support IE.

But, the two value radius is accepted by this function of mine. I just didn't know it existed =).

If you call $("id_elemente").setBorderRadius("20px 40px") on Chrome, it will display its oval shape.

Thanks for the info though. At least I know it also works for borders like that.

It would be great if this could be applied to IE, but don't think it will ever happen until they accept the border-radius css attribute. At least, for what I'm doing I can forget about IE users, as the rounded borders are just a fancy-non-functional looking thing, as almost every rounded border is, I think, hehe. That's why I posted it here.

--
You received this message because you are subscribed to the Google Groups "Prototype: Core" group.
To post to this group, send email to prototy...@googlegroups.com
To unsubscribe from this group, send email to prototype-cor...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/prototype-core?hl=en

[joe t.]

http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html
Looks like IE9 will at least partially support border-radius. But by
that demo (designed for the IE9 preview), it looks like it'll only
support the single radius dimension per corner. i guess that's
something to look forward to. /shrug
-joe t.