Générateur de Coins Arrondis
Réglez les quatre coins et obtenez le CSS le plus court qui les produit, avec un avertissement si la boîte est trop petite.
Résultats
Ce que fait cet outil
Arrondir les quatre coins de la même façon est facile. En arrondir trois, ou en laisser un à angle droit, oblige à se rappeler dans quel ordre va la forme courte et comment se répartissent les versions à deux et trois valeurs. Cette page prend les quatre coins voulus et écrit la ligne la plus courte qui produit exactement ceux-là, dans l'unité où vous travaillez. Elle vérifie aussi les coins par rapport à la taille de la boîte, car le CSS réduit silencieusement tout ce qui ne tient pas.
Formule
écrit la forme la plus courte de border-radius qui donne les quatre coins demandés
Variables
| Symbole | Signification | Unité |
|---|---|---|
top_left | Coin supérieur gauche | — |
top_right | Coin supérieur droit | — |
bottom_right | Coin inférieur droit | — |
bottom_left | Coin inférieur gauche | — |
unit | Unité | — |
width | Largeur de la boîte | px |
height | Hauteur de la boîte | px |
OUT | Le CSS | — |
VA | Seulement la valeur | — |
DC | Coins différents | — |
LC | Plus grand coin | — |
LI | Maximum permis par la boîte | px |
CP | Le navigateur va le rogner | — |
PI | Donne une forme de pilule | — |
Exemple résolu
- Coin supérieur gauche16
- Coin supérieur droit16
- Coin inférieur droit4
- Coin inférieur gauche16
- Unitépx
- Largeur de la boîte240 px
- Hauteur de la boîte140 px
- Le CSSborder-radius: 16px 16px 4px;
- Seulement la valeur16px 16px 4px
- Coins différents2
- Plus grand coin16,0
- Maximum permis par la boîte70,0 px
- Le navigateur va le rognerNon
- Donne une forme de piluleNon
Questions fréquentes
Pourquoi obtient-on parfois moins de quatre nombres ?
Parce que le CSS permet de dire la même chose plus brièvement quand les coins se répètent. Une valeur définit les quatre. Deux définissent la paire haut-gauche et bas-droite, puis l'autre paire. Trois définissent le haut-gauche, puis les deux coins de l'autre diagonale, puis le bas-droite. Cette page écrit toujours la forme la plus courte qui produit exactement les coins demandés, celle que vous écririez à la main si vous connaissiez la règle par cœur.
Que signifie « le navigateur va le rogner » ?
Que vous avez demandé des coins plus grands que la boîte ne peut contenir. Quand deux coins d'un même bord dépassent ensemble la longueur de ce bord, le CSS les réduit tous proportionnellement jusqu'à ce qu'ils tiennent : la forme obtenue n'est donc pas celle que vous avez écrite. Ce n'est pas une erreur et rien ne casse, mais les nombres de votre feuille de style cessent de décrire ce qui apparaît à l'écran — et si la boîte change de taille, le résultat change avec elle.