Mode d'emploi
- Choisissez l'Unité : px pour un rayon fixe, ou % pour un rayon qui suit la taille de la boîte.
- Saisissez un rayon pour chaque coin sous Haut gauche, Haut droit, Bas droit et Bas gauche. Un coin à 0 est carré.
- Cochez Coins elliptiques (un rayon vertical distinct) si un coin doit être plus large que haut, puis saisissez son rayon vertical.
- Copiez la déclaration CSS et collez-la dans la règle de votre élément.
Comment les quatre coins sont écrits
La propriété border-radius accepte de une à quatre valeurs de rayon horizontal, dans l'ordre haut gauche, haut droit, bas droit et bas gauche. Une liste plus courte répète les valeurs qu'elle contient : avec deux valeurs, la première vaut pour les coins haut gauche et bas droit, et la seconde pour les coins haut droit et bas gauche. Un rayon vertical s'écrit après une barre oblique, dans le même ordre.
La syntaxe est décrite dans la spécification CSS Backgrounds and Borders. Chaque rayon est une longueur ou un pourcentage de la boîte, et un rayon nul n'a pas besoin d'unité.
border-radius: haut-gauche haut-droit bas-droit bas-gauche / vertical-haut-gauche vertical-haut-droit vertical-bas-droit vertical-bas-gaucheLa forme la plus courte
L'outil supprime chaque valeur que l'abréviation répéterait de toute façon. Si le coin bas gauche est égal au coin haut droit, il n'est pas écrit ; si le bas droit est égal au haut gauche, la troisième valeur disparaît aussi. Quatre coins égaux deviennent une seule valeur : 12px 12px 12px 12px s'écrit 12px.
La barre oblique n'est écrite que lorsqu'un rayon vertical diffère de son rayon horizontal. Sans coins elliptiques, chaque rayon vertical est égal à son rayon horizontal : aucune barre oblique n'apparaît.
Exemple détaillé : une carte aux coins elliptiques
Réglez le coin haut gauche sur 40 px par 20 px, le haut droit sur 20 px par 10 px, le bas droit sur 40 px par 20 px et le bas gauche sur 20 px par 10 px. Les rayons horizontaux valent 40, 20, 40, 20, que l'abréviation écrit 40px 20px. Les rayons verticaux valent 20, 10, 20, 10, qu'elle écrit 20px 10px.
La déclaration est border-radius: 40px 20px / 20px 10px;, et l'aperçu montre des coins plus larges que hauts.
Questions fréquentes
Pourquoi y a-t-il deux séries de nombres séparées par une barre oblique ?
La première série donne le rayon horizontal de chaque coin, et la série après la barre oblique donne le rayon vertical. Sans barre oblique, un coin est un arc de cercle, avec le même rayon dans les deux sens.
Que fait un rayon en pourcentage ?
Un pourcentage se calcule sur la largeur de la boîte pour le rayon horizontal, et sur sa hauteur pour le rayon vertical. 50 % sur chaque coin donne un cercle ou une ellipse, selon que la boîte est carrée ou non.
Pourquoi l'ordre est-il haut gauche, haut droit, bas droit, bas gauche ?
L'abréviation suit le sens des aiguilles d'une montre qu'utilisent les autres propriétés de boîte, en commençant en haut à gauche. Une fois cet ordre connu, les formes plus courtes à deux ou trois valeurs se lisent facilement.
L'outil vérifie-t-il le rayon par rapport à la taille de la boîte ?
Non. L'outil vérifie seulement que chaque rayon est un nombre égal ou supérieur à zéro, et qu'il reste dans la limite de 1 000 px ou de 100 %. Si deux rayons voisins dépassent ensemble le côté de la boîte, le navigateur les réduit.
Ce que je saisis est-il enregistré ou envoyé à un serveur ?
Non. L'aperçu et le CSS sont produits dans votre navigateur. Rien n'est enregistré ni envoyé à notre serveur : copiez donc la déclaration avant de quitter la page.
Sources
- W3C (en anglais) : CSS Backgrounds and Borders Level 3, border-radius
- MDN Web Docs (en anglais) : border-radius
Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.