MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Vos résultats de recherche

    border-top-right-radius

    Résumé

    La propriété CSS border-top-right-radius définie le rayon de la bordure du coin en haut à droite. Avant Gecko 2.0 (Firefox 4.0) la propriété était nommée -moz-border-radius-topright. L'arrondi peut être circulaire, ellipsoïde ou inexistant et le coin est alors carré.

    L'arrière-plan, qu'il soit une image ou une couleur, est contenu dans la bordure, même si elle est arrondie. La manière dont est inclu l'arrière-plan dépends de la propriéte background-clip.

    • Valeur initiale 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 deux valeurs, des longueurs absolues ou des pourcentages
    • Animable 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

    border-bottom-right-radius: [ <length> | <percentage> ]{1,2} 
    border-top-right-radius: rayon                /* Ce coin est un cercle   */  E.g. border-top-right-radius: 3px
    border-top-right-radius: horizontal vertical  /* Ce coin est une ellipse */  E.g. border-top-right-radius: 0.5em 1em
    
    border-top-right-radius: inherit
    
    où:    rayon est un <longueur> ou un <percentage> indiquant le rayon du cercle à utiliser pour la bordure du coin.
      horizontal est un <longueur> ou un <percentage> indiquant le demi-grand axe horizontal de l'ellipse à utiliser pour la bordure du coin.
      vertical est un <longueur> ou un <percentage> indiquant le demi-grand axe vertical de l'ellipse à utiliser pour la bordure du coin.

    Valeurs

    <longueur>
    Corresponds à la longueur du rayon du cercle ou du demi-grand axe de l'ellipse. Voir <longueur> pour les unités possibles. Les valeurs négatives ne sont pas valides.
    <pourcentage>
    Corresponds à la longueur du rayon du cercle ou du demi-grand axe de l'ellipse. Les pourcentages pour le rayon horizontal sont fonction de la largeur de la boîte incluant les bordures, tandis que les pourcentages pour le rayon vertical sont fonction de la hauteur de la boîte incluant les bordures.

    Examples

    Live example Code
     
    Un arc de cercle est utilisé comme bordure
    div {
      border-top-right-radius: 40px 40px;
    }
    
     
    Un arc d'ellipse est utilisé comme bordure
    div {   
      border-top-right-radius: 40px 20px;
    }
    
     
    La boite est carré: un arc d'ellipse est utilisé comme bordure
    div {   
      border-top-right-radius: 40%;
    }
    
     
    La boite n'est pas carré: un arc d'ellipse est utilisé comme bordure
    div {   
      border-top-right-radius: 40%;
    }
    
     
    L'arrière-plan coloré est contenu dans la bordure
    div {
      border-top-right-radius:40%;
      border-style: black 3px double;
      background-color: rgb(250,20,70);
      background-clip: content-box;
    }
    

     

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation Initial specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 0.2 -webkit

    1.0 (1.0) - 12.0 (12.0)-moz
    but with a non-standard name:
    -moz-border-radius-topright

    9.0 10.5 3.0 (522)-webkit
    4.0 4.0 (2.0) 5.0 (532.5)
    Percentages 4.0 1.0 (1.0) with a bug (see note) 9.0 10.5 5.0 (532.5)
    4.0 (2.0)
    Elliptical corners 0.2 3.5 (1.9.1) 9.0 10.5 3.0 (522 )
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

     

    Voir également

    Voir les propriétés border-bottom-left-radius et border-radius pour plus d'information.

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: ksad, Fredchat, teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale