mozilla
Vos résultats de recherche

    -moz-border-radius

    Summary

    The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

    Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

    The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

    This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

    As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.

    • Valeur initiale La concaténation des valeurs initiales des propriétés associées :
      • border-bottom-left-radius: 0
      • border-bottom-right-radius: 0
      • border-top-left-radius: 0
      • border-top-right-radius: 0
    • S'applique à tous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de type table ou inline-table lorsque border-collapse vaut collapse. Le comportement sur les éléments de type table interne est pour l'instant indéfini.
    • Héritée non
    • Pourcentages se rapporte à la dimension correspondance de la boîte de bordure
    • Média visual
    • Valeur calculée comme chacune des propriétés du raccourci:
      • border-bottom-left-radius: deux valeurs, longueurs absolues ou pourcentages
      • border-bottom-right-radius: deux valeurs, longueurs absolues ou pourcentages
      • border-top-left-radius: deux valeurs, des longueurs absolues ou des pourcentages
      • border-top-right-radius: deux valeurs, des longueurs absolues ou des pourcentages
    • Animable pour chaque propriété individuelle de la propriété raccourcie :
      • border-top-left-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
      • border-top-right-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
      • border-bottom-right-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
      • border-bottom-left-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntax

    Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
    The syntax of the first radius allows one to four values:
    border-radius: radius             
    border-radius: top-left-and-bottom-right top-right-and-bottom-left 
    border-radius: top-left top-right-and-bottom-left bottom-right 
    border-radius: top-left top-right bottom-right bottom-left 
    
    The syntax of the second radius also allows one to four values
    border-radius: (first radius values) / radius             
    border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left 
    border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right 
    border-radius: (first radius values) / top-left top-right bottom-right bottom-left 
    
    border-radius: inherit
    

    Values

    radius all-corner.png Is a <longueur> or a <percentage> denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
    top-left-and-bottom-right top-left-bottom-right.png Is a <longueur> or a <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
    top-right-and-bottom-left top-right-bottom-left.png Is a <longueur> or a <percentage> denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
    top-left top-left.png Is a <longueur> or a <percentage> denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
    top-right top-right.png Is a <longueur> or a <percentage> denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
    bottom-right bottom-rigth.png Is a <longueur> or a <percentage> denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
    bottom-left bottom-left.png Is a <longueur> or a <percentage> denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
    inherit   Is a keyword indicating that all four values are inherited from their parent's element calculated value.

    Values

    <length>
    Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <longueur> data types. Negative values are invalid.
    <percentage>
    Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

    For example:

    border-radius: 1em/5em;
    
    /* is equivalent to */
    
    border-top-left-radius:     1em 5em;
    border-top-right-radius:    1em 5em;
    border-bottom-right-radius: 1em 5em;
    border-bottom-left-radius:  1em 5em;
    
    border-radius: 4px 3px 6px / 2px 4px;
    
    /* is equivalent to: */
    
    border-top-left-radius:     4px 2px;
    border-top-right-radius:    3px 4px;
    border-bottom-right-radius: 6px 2px;
    border-bottom-left-radius:  3px 4px;
    

    Examples

      border: solid 10px;
      /* the border will curve into a 'D' */  
      border-radius: 10px 40px 40px 10px;
      
    
      border: groove 1em red;  
      border-radius: 2em;
    
      background: gold;
      border: ridge gold;
      border-radius: 13em/3em; 
    
      border: none;
      border-radius: 40px 10px;  
    
      border: none;
      border-radius: 50%; 
    

    Live Samples

    Sample 1 : http://jsfiddle.net/Tripad/qnGKj/2/

    Sample 2 : http://jsfiddle.net/Tripad/qnGKj/3/

    Sample 3 : http://jsfiddle.net/Tripad/qnGKj/4/

    Sample 4 : http://jsfiddle.net/Tripad/qnGKj/5/

    Sample 5 : http://jsfiddle.net/Tripad/qnGKj/6/

     

    Notes

    • Dotted and dashed rounded border corners are rendered as solid in Gecko; see bug 382721.
    • border-radius does not apply to table elements when border-collapse is collapse.
    • Old versions of WebKit handle multiple values differently, see below.

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    La définition de 'border-radius' dans cette spécification.
    Candidate Recommendation  

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 4.0 (2.0)
    1.0 (1.7 ou moins)-moz
    4.0
    0.2-webkit
    9.0 10.5 5.0
    3.0-webkit
    Elliptical borders 3.5 (1.9.1) yes yes yes yes, but see below
    4 values for 4 corners yes 4.0 yes yes 5.0
    Percentages yes
    was (see below)
    yes yes 11.5 5.1
    Feature iOS Safari Opera Mini Opera Mobile Android Browser
    Basic support 3.2-webkit Pas de support Pas de support 2.1-webkit
    Elliptical borders ? Pas de support Pas de support ?
    4 values for 4 corners ? Pas de support Pas de support ?
    Percentages ? Pas de support Pas de support ?

    <percentage> values

    • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
    • are buggy in Opera prior to 11.50
    • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
    • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)

    Gecko notes

    In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

    • changes the handling of <percentage> values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
    • makes rounded corners clip content and images (if overflow: visible is not set)
    Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

    WebKit notes

    Older Safari and Chrome versions (prior to WebKit 532.5)

    • support only one value for all 4 corners. For different radii the long form properties must be used
    • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners
      /* this is equivalent: */
      
      -webkit-border-radius: 40px 10px;
              border-radius: 40px/10px;
      

    Opera notes

    In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

    See also

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli
    Dernière mise à jour par : teoli,