Générer un rayon de bordure CSS avec quatre coins

Saisissez les quatre valeurs de coin, choisissez une unité, puis générez la déclaration CSS border-radius. Les valeurs sont placées dans l’ordre haut gauche, haut droit, bas droit et bas gauche.

À quoi sert le générateur de border-radius

Pour arrondir les angles d’un élément CSS, le générateur produit une déclaration border-radius à partir de quatre valeurs et d’une unité sélectionnée. Il convient aussi bien à un arrondi identique sur les quatre coins qu’à une forme asymétrique, lorsque chaque coin doit recevoir une valeur différente. Les champs correspondent aux coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche, dans cet ordre.

Comment générer la déclaration CSS

1. Saisissez une valeur pour chaque coin : haut gauche, haut droit, bas droit, puis bas gauche. Vous pouvez utiliser quatre valeurs identiques pour obtenir un arrondi uniforme ou des valeurs distinctes pour créer une forme plus personnalisée.

2. Choisissez l’unité à ajouter aux valeurs. Si vous laissez les champs de valeur vides, chaque coin prend la valeur 10. Si aucune unité n’est indiquée, l’unité utilisée par défaut est px.

3. Vérifiez l’ordre des coins avant de lancer la génération. La première valeur concerne le coin supérieur gauche, la deuxième le coin supérieur droit, la troisième le coin inférieur droit et la quatrième le coin inférieur gauche.

4. Lancez la génération, puis récupérez la déclaration CSS produite. L’unité fournie est ajoutée à chaque valeur dans la déclaration. Copiez cette déclaration à l’endroit approprié de votre règle CSS et contrôlez visuellement le résultat sur l’élément concerné.

Comment lire et vérifier le résultat

La sortie est une déclaration border-radius, et non une feuille de style complète. Pour un arrondi uniforme, les quatre positions reprennent la même valeur. Pour un arrondi asymétrique, la lecture de la déclaration suit le même ordre que la saisie : haut gauche, haut droit, bas droit, bas gauche. Cette correspondance permet de retrouver rapidement quel angle modifier.

Une valeur nulle peut servir à conserver un angle droit pendant que les autres coins sont arrondis. L’unité saisie est incorporée à chaque valeur ; relisez donc la déclaration générée avant de l’intégrer à votre CSS, notamment si vous avez saisi une unité ou un texte inhabituel. Les faits disponibles décrivent la production de la déclaration et l’insertion des valeurs fournies, mais ne définissent pas de contrôle, de normalisation, d’arrondi ou de limite pour les valeurs et les unités. La validité CSS du résultat doit donc être vérifiée dans votre contexte.

Exemple pratique

Vous préparez une carte dont le coin inférieur gauche doit rester droit tandis que les trois autres coins sont arrondis.

Pour une carte dont les coins doivent être progressifs, saisissez 12, 8, 4 et 0, choisissez px, puis lancez la génération et examinez la déclaration obtenue.

Le résultat contient une déclaration CSS border-radius qui reprend quatre positions, dans l’ordre haut gauche, haut droit, bas droit et bas gauche, avec l’unité fournie.

Limites

• L’outil produit une déclaration border-radius et ajoute l’unité fournie à chaque valeur. Les faits disponibles ne définissent pas de validation, de normalisation, d’arrondi ni de limite pour les valeurs ou les unités ; vérifiez donc la déclaration dans votre contexte CSS.

Erreurs fréquentes

• Erreur fréquente : inverser le haut droit et le bas gauche. Pour corriger cela, relisez les quatre champs dans l’ordre haut gauche, haut droit, bas droit, bas gauche avant de générer la déclaration.

Questions fréquentes

Quelle unité est utilisée par défaut ?

Si vous omettez l’unité, px est utilisée par défaut. Si vous en fournissez une, son texte est ajouté à chaque valeur de coin.

Que se passe-t-il si je ne renseigne pas les valeurs ?

Oui, si aucune valeur n’est indiquée, chaque coin prend la valeur 10. Vous pouvez ensuite renseigner des valeurs distinctes pour obtenir un arrondi asymétrique.

Comment obtenir des coins différents ou conserver un angle droit ?

La déclaration suit l’ordre haut gauche, haut droit, bas droit, puis bas gauche. Une valeur nulle peut donc rester associée à un angle précis tandis que les autres reçoivent un arrondi.