border-top-left-radius

Résumé

La propriété CSS border-top-left-radius définie le rayon de la bordure du coin en haut à gauche. Avant Gecko 2.0 (Firefox 4.0) la propriété était nommée -moz-border-radius-topleft. 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-left-radius: [ <length> | <percentage> ]{1,2} 
border-top-left-radius: rayon                /* Ce coin est un cercle   */  E.g. border-top-left-radius: 3px
border-top-left-radius: horizontal vertical  /* Ce coin est une ellipse */  E.g. border-top-left-radius: 0.5em 1em

border-top-left-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-left-radius: 40px 40px;
}
 
Un arc d'ellipse est utilisé comme bordure
div {
  border-top-left-radius: 40px 20px;
}
 
La boite est carré: un arc d'ellipse est utilisé comme bordure
div 
  border-top-left-radius: 40%;
}
 
La boite n'est pas carré: un arc d'ellipse est utilisé comme bordure
div {
  border-top-left-radius: 40%;
}
 
L'arrière-plan coloré est contenu dans la bordure
div {
  border-top-left-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-topleft

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 : 
Contributeurs à cette page : teoli, ksad, FredB, Yuichiro, Fredchat
Dernière mise à jour par : teoli,
Masquer la barre latérale