SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Curvy Corners Border radius explanation

    Buon giorno from 2 degrees pitch black wetherby UK :-)

    I have just added curved corners to my tutorial website http://tutorial.davidclick.com/curvy.html but i would like please an explanation to why I need to reference moz & web kit border radius as in:

    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;

    So my question is please why does webkit & moz really do or put another way why does just border-radius do the job?

    Grazie tanto
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Zygoma View Post
    I have just added curved corners to my tutorial website http://tutorial.davidclick.com/curvy.html but i would like please an explanation to why I need to reference moz & web kit border radius as in:

    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;

    So my question is please why does webkit & moz really do or put another way why does just border-radius do the job?
    If you're just using basic border-radius with a single measurement then they all work the same way. But at the time they were implemented in the browsers, the draft spec was very rough and ready and there were some details that were implemented differently in different browsers. There's a lot more details at http://www.the-art-of-web.com/css/border-radius/, but it comes down to specifying multiple radii and whether that gives you different circular arcs on different corners or the same elliptical arc on all corners.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zygoma View Post
    So my question is please why does webkit & moz really do or put another way why does just border-radius do the job?
    When something in CSS is still experimental and not an official CSS property yet, browser makers ("vendors") are asked to use these "vendor prefixes" for testing purposes. However, a few CSS3 properties are so well established now that the vendor prefixes are not needed, and that's the case for border-radius. (More on that here: http://generatedcontent.org/post/379...updateyourcss3)

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    All you need to use is border-radius.

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •