border-top-left-radius
======================

La propriété **`border-top-left-radius`** définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut `0`, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de `background-clip`.

Exemple interactif
------------------

**Note :** Si la valeur de cette propriété n'est pas définie par la propriété raccourcie `border-radius` et que cette dernière est appliquée après `border-top-left-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

Syntaxe
-------


```css
/\* Le coin est un quart de cercle \*/
/\* La valeur indique le rayon de courbure \*/
border-top-left-radius: 3px;

/\* Le coin est un quart d'ellipse \*/
/\* La première valeur indique le demi-axe \*/
/\* horizontal et la seconde le demi-axe \*/
/\* vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;
```


Cette propriété peut prendre deux formes :

* Une première avec une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure pour ce coin
* Une seconde avec deux valeurs
    + La première est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
    + La seconde est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
### Valeurs

`<length-percentage>`

La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type `<length>`. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | 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.. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Pourcentages | se rapporte à la dimension correspondance de la boîte de bordure |
| Valeur calculée | deux `longueurs` absolues ou deux `pourcentages` |
| Type d'animation | une longueur, pourcentage ou calc() ; |

Syntaxe formelle
----------------
```

border-top-left-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 130px;
}

.arc\_cercle {
  border-top-left-radius: 40px 40px;
}

.arc\_ellipse {
  border-top-left-radius: 40px 20px;
}

.pourcentage {
  border-top-left-radius: 40%;
}

.rognage {
  border: black 10px double;
  border-top-left-radius: 40%;
  background-color: rgb(250,20,70);
  background-clip: content-box; // essayez margin-box...
}
```

### HTML


```html
<div class="arc\_cercle"></div>
<div class="arc\_ellipse"></div>
<div class="pourcentage"></div>
<div class="rognage"></div>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-radius |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La propriété raccourcie `border-radius`
* Les propriétés pour les autres coins :
    + `border-top-right-radius`,
    + `border-bottom-right-radius`,
    + `border-bottom-left-radius`.