Parcours de la tâche / de l'entrée au résultat
Comment façonner un border-radius CSS
- 01
Choisissez l'unité
Réglez Unité sur Pixels ou Pourcent — l'espace de travail démarre en Pixels. Les pixels restent constants quelle que soit la taille de l'élément ; les valeurs en pourcent s'adaptent à l'élément, ce qui rend possibles les formes organiques et asymétriques.
- 02
Ajustez les quatre coins
Déplacez Haut gauche, Haut droit, Bas droit et Bas gauche — chacun de 0 à 100 dans l'unité choisie, par pas de 1. Les quatre démarrent à 24 px, et la carte d'aperçu se redessine à chaque modification.
- 03
Liez ou déliez les coins
Gardez Lier tous les coins activé pour modifier chaque coin d'un coup, ou désactivez-le pour façonner chaque coin indépendamment. L'espace de travail l'indique à côté de l'interrupteur : modifier un coin met à jour les quatre tant qu'ils sont liés.
- 04
Essayez la forme d'exemple
Cliquez sur Charger un exemple pour une référence asymétrique : Haut gauche et Bas droit à 64 px, Haut droit et Bas gauche à 12 px, déliés — la forme de feuille en diagonale utilisée sur les cartes et les avatars. Réinitialiser ramène au 24 px uniforme par défaut.
- 05
Ajouter des rayons verticaux
Sous Rayons verticaux, attribuez à chaque coin une seconde valeur de 0 à 100 dans la même unité. La première modification désactive Lier tous les coins et écrit la déclaration sous la forme horizontal / vertical : quatre valeurs dans le sens horaire à partir du coin supérieur gauche, une barre oblique, puis quatre autres, ce qui rend les coins elliptiques. Le badge d'état affiche CSS VALIDE ; toute valeur hors limites le fait passer à VÉRIFIEZ LES VALEURS et bloque la copie comme le téléchargement.
- 06
Copiez ou téléchargez le CSS
Exporter le résultat actuel. CSS / HTML. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.