CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comment créer des coins arrondis en CSS

Comment créer des coins arrondis en CSS

Les arrondis
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la propriété border-radius

Objectifs

Comprendre l'utilisation de la propriété border-radius en CSS pour créer des coins arrondis sur les éléments HTML.

Résumé

Découvrez comment utiliser border-radius en CSS pour appliquer des coins arrondis à vos éléments HTML.

Description

Dans cette leçon, nous allons explorer la propriété border-radius en CSS qui permet de créer des coins arrondis sur les éléments HTML. Cette propriété est extrêmement pratique pour améliorer l'interface utilisateur sans avoir recours à des images prédéfinies. Nous verrons qu'il est possible d'appliquer des arrondis uniformes ou de régler individuellement chaque coin d'un élément.

Nous commencerons par des exemples simples en définissant un border-radius de 10 pixels pour obtenir des coins arrondis uniformes. Ensuite, nous examinerons comment spécifier des valeurs différentes pour chaque coin, permettant d'obtenir des mises en forme plus complexes.

Enfin, nous démontrerons l'impact de cette propriété sur des éléments graphiques tels que les images. Vous apprendrez à rendre vos images parfaitement rondes et à ajouter des bordures stylisées directement depuis votre feuille de style CSS, sans nécessiter d'édition graphique préalable.

Voir plus

Questions fréquentes

Quelle est la propriété CSS utilisée pour créer des coins arrondis?
La propriété CSS utilisée est border-radius.
Comment rendre une image ronde avec CSS?
Pour rendre une image ronde, utilisez border-radius: 50%;.
Peut-on appliquer des valeurs différentes pour chaque coin avec border-radius?
Oui, en spécifiant plusieurs valeurs, on peut différencier les arrondis sur chaque coin.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !