11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
LM
Accueil > Cours > Créez votre site web avec HTML5 et CSS3 > Créez des bordures et des ombres
Créez votre site web avec HTML5 et CSS3
15 heures Facile
Mis à jour le 04/11/2024
Créez des bordures et des ombres
Décrochez un diplôme reconnu !
Passez à la pratique avec nos formations diplômantes : des projets concrets,
un mentor dédié et un emploi garanti !
Voir les parcours
Créez des bordures avec la propriété CSS border
Le CSS offre un large choix de bordures : border-width , border-color , border-style …
Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui
regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background dans
le chapitre précédent ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 1/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
Avec border , on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :
1. La largeur que l'on définit avec une valeur en pixels (comme 2px).
2. La couleur que l'on indique avec un nom de couleur, une valeur hexadécimale, ou une valeur RGB.
3. Le type de bordure qui peut être solid (un trait simple), double (un double trait), dotted
(un trait en pointillés), dashed (un trait en tirets), ou autre. Vous avez un large panel d'options :
Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous
pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :
1. border-top : bordure du haut.
2. border-bottom : bordure du bas.
3. border-left : bordure de gauche.
4. border-right : bordure de droite.
Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous le désirez :
border-top-width pour modifier l'épaisseur de la bordure du haut,
border-top-color pour la couleur du haut, etc.
Ce sont aussi des super-propriétés, elles fonctionnent comme border mais elles ne s'appliquent
donc qu'à un seul côté.
On pourrait faire une compilation de nos éléments juste au-dessus.
On écrit dans le fichier HTML :
html
1 <p class="element">Élément</p>
Puis dans le CSS:
css
1 .element {
2 border-top: 3px #EB5353 dotted;
3 border-right: 3px #F9D923 double;
4 border-bottom: 3px #36AE7C dashed;
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 2/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
5 border-left: 3px #187498 solid;
6 }
Ce qui nous donnerait :
L'élément a 4 styles de bordures différents
Bon ce n'est pas forcément du plus bel effet, mais c'était pour la démonstration !
En tout cas, vous pouvez aller tester ces différentes propriétés et vous amuser à recréer
l'élément ci-dessus avec le CodePen P2C4a.
On pourrait très bien avoir un élément qui n'aurait un bord que d'un seul côté. Pour cela, il suffit de ne
déclarer qu'une seule propriété. Ici, on utilise uniquement la propriété border-left :
css
1 .element {
2 font-size: 25px;
3 background-color: skyblue;
4 border-left: 5px #187498 solid;
5 padding: 100px;
6 }
Ce qui donne :
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 3/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
L'élément a une bordure à gauche
Arrondissez vos angles avec border-radius
La propriété CSS border-radius permet d'arrondir les angles de n'importe quel élément. Il suffit
d'indiquer la taille de l'arrondi en pixels :
css
1 .element {
2 font-size: 25px;
3 background-color: skyblue;
4 border-radius: 10px;
5 padding: 100px;
6 }
Ce qui donne :
L'élément a des coins arrondis
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 4/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
Tout comme pour les bordures, il n'y a aucune obligation d'avoir les mêmes arrondis partout : on
peut aussi préciser la forme de l'arrondi pour chaque coin. D'un point de vue design, c'est très
pratique lorsqu'on souhaite coller deux formes qui ont des border radius, par exemple pour des
"groupes de boutons". Vous trouverez plus d’infos sur Bootstrap.
Dans ce cas, indiquez les quatre valeurs correspondant aux angles dans la propriété border-radius
, dans cet ordre :
1. En haut à gauche.
2. En haut à droite.
3. En bas à droite.
4. En bas à gauche.
css
1 .element {
2 font-size: 25px;
3 background-color: skyblue;
4 border-radius: 10px 30px 0px 90px;
5 padding: 100px;
6 }
Ce qui donne :
L'élément a des radius de différentes valeurs pour chaque angle
Il est même possible de créer des courbes elliptiques avec border-radius .Pour cela, il faut indiquer
deux valeurs séparées par une barre oblique (slash) : / . Mais le rendu est assez dur à anticiper. Il vaut
mieux utiliser des outils de visualisation comme Fancy Border Radius du rendu final :
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 5/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
Des courbes elliptiques sur un élément
Il ne reste plus qu'à cliquer sur "copy" pour reporter la valeur du border-radius générée automatiquement
(sans oublier le point virgule ; à la fin de la ligne) dans notre code :
css
1 .element {
2 font-size: 25px;
3 background-color: skyblue;
4 border-radius: 30% 70% 70% 30% / 30% 58% 42% 70%;
5 padding: 100px;
6 }
Et voilà le résultat ! De quoi faire des éléments (boutons, encarts, blocs…) uniques sur votre site web :
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 6/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
L'élément a des courbes elliptiques
Ajoutez une ombre portée avec la propriété CSS
box-shadow
Les ombres donnent des effets de profondeur intéressants sur une page web. C'est particulièrement
utile sur les boutons d'un site par exemple. Du fait de l'impression de relief, un bouton avec une ombre
portée indique visuellement aux visiteurs du site qu'il est "cliquable".
La propriété CSS box-shadow s'applique à tout le bloc, et prend quatre valeurs dans l'ordre suivant :
1. Le décalage horizontal de l'ombre.
2. Le décalage vertical de l'ombre.
3. L'adoucissement du dégradé.
4. La couleur de l'ombre.
L'adoucissement peut être :
faible (si on lui donne une valeur inférieure à celle du décalage),
normal (si on lui donne une valeur égale à celle du décalage)
ou élevé (si on lui donne une valeur supérieure à celle du décalage).
Par exemple :
css
1 .element {
2 font-size: 25px;
3 background-color: skyblue;
4 border-radius: 10px;
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 7/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
5 box-shadow: 6px 6px 0px rgba(0, 0, 0);
6 padding: 100px;
Ce qui donne :
L'élément a une ombre portée à fort contraste
On obtient une ombre noire, portée horizontalement et verticalement, de 6 pixels, sans adoucissement.
Ce qui n'est pas forcément l'effet recherché… Ajoutons donc un adoucissement grâce au troisième
paramètre de la propriété box-shadow , tout en jouant sur l'opacité de la couleur avec RGBA :
css
1 .element {
2 font-size: 25px;
3 background-color: skyblue;
4 border-radius: 10px;
5 box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
6 padding: 100px;
7 }
Ce qui donne :
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 8/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
L’effet d'ombre est plus esthétique
Il n'est pas toujours simple de trouver l’effet d’ombre désiré à tâtons. Pour vous aider, vous
pouvez :
utiliser l’outil Shadows Brumm ;
vous inspirer des exemples listés sur CSS Scan.
Ajoutez une ombre à un texte avec text-shadow
text-shadow permet d'ajouter une ombre sur les lettres de votre texte. Effet vintage garanti !
Les valeurs fonctionnent exactement de la même façon que box-shadow :
1. décalage horizontal,
2. décalage vertical,
3. adoucissement,
4. et couleur.
Voyez ce que ça donne dans le morceau de code juste en dessous :
css
1 h1 {
2 font-size: 50px;
3 text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
4 padding: 100px;
5 }
Et voyez ce que ça nous donne :
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 9/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
Le texte a une ombre portée
Je vous invite maintenant à aller vous entraîner à maitriser toutes les propriétés que l'on a
vues dans ce chapitre avec le CodePen P2C4b.
À vous de jouer !
C’est maintenant le moment de mettre en pratique ce que vous venez d’apprendre, dans le projet de
Robbie Lens. Pour cela, vous allez :
ajouter des arrondis sur les liens "Un projet ? Écrivez-moi" et "Voir mon portfolio", d'une valeur de
50px (le rendu n'est pas très beau, mais ne vous inquiétez pas, nous allons l'améliorer au fil des
chapitres) ;
créer une div , sur la page À propos, qui englobe le paragraphe et la liste de compétences de
Robbie Lens ; lui ajouter une bordure à droite et en bas, de 1px d'épaisseur et de la couleur
#8e86b5 .
Comme pour les activités précédentes, vous avez accès au code nécessaire pour débuter
l’exercice sur la branche P2C4-exercice,
Passez-y un peu de temps avant de consulter la solution sur la branche P2C4-solution.
En résumé
On peut appliquer une bordure à un élément avec la super-propriété CSS border . Il faut
indiquer la largeur de la bordure, sa couleur et son type (simple, double, pointillés, tirets).
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 10/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
On peut arrondir les bordures avec la propriété CSS border-radius .
On peut ajouter une ombre aux blocs de texte avec box-shadow . On doit indiquer le décalage
vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.
Le texte peut lui aussi avoir une ombre avec text-shadow .
C’est grisant, n’est-ce pas ? Vous allez voir, dans le prochain chapitre, on va encore plus s’amuser en
créant des apparences dynamiques en fonction des actions de l’utilisateur. Allons-y !
J'ai terminé ce chapitre et je passe au suivant
Et si vous obteniez un diplôme OpenClassrooms ?
Formations jusqu’à 100 % financées
Date de début flexible
Projets professionnalisants
Mentorat individuel
Trouvez la formation et le financement faits pour vous
Être orienté Comparez nos types de formation
Ajoutez de la couleur et un fond Créez des apparences dynamiques
Les professeurs
Mathieu Nebra
Entrepreneur à plein temps, auteur à plein temps et co-fondateur d'OpenClassrooms :o)
Alexia Toulmet
Développeuse frontend passionnée par l'enseignement 👩💻
Découvrez aussi ce cours en...
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 11/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
Livre
POUR LES ÉTUDIANTS
POUR LES EMPLOYEURS
OPENCLASSROOMS
AIDE
LANGUE
Français
NOUS SUIVRE
Mentions légales Conditions générales d'utilisation Politique de protection des données personnelles
Cookies Accessibilité
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 12/13
11/01/2025 16:09 Créez des bordures et des ombres - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres 13/13
