Exercice 8.2 · 6 min · 0 tentative
Un cadre autour
🎯 Objectif
Dessiner une bordure avec le raccourci border — trois morceaux en une déclaration — puis arrondir les coins.
📖 Exemple
La fiche d'un jeu de société, cadrée d'un trait ardoise bien épais :
<div class="fiche">
<h2>Les Aventuriers du Rail</h2>
<p>De 2 à 5 joueurs, parties de 45 minutes.</p>
</div>
.fiche {
padding: 16px;
border: 4px solid #1e293b;
border-radius: 8px;
}
Pourquoi une seule ligne pour tout le cadre ? border est une propriété raccourcie : trois morceaux séparés par des espaces — jamais des virgules. Le premier donne l'épaisseur, le deuxième le style du trait (solid = continu), le troisième la couleur. Et le mot du milieu n'est pas décoratif : le style par défaut est none, donc sans solid, rien ne s'affiche. border-radius, lui, est une autre propriété : il arrondit les coins de la boîte entière, fond compris, même sans aucun trait.
💡 Retiens déjà ceci : ces 4 pixels de trait s'ajoutent à la largeur de la boîte, des deux côtés. Ça paraît anodin ; c'est exactement ce qui fera déborder ta carte en 6.4.
📝 Consigne
La règle pour la classe carte est déjà ouverte dans l'onglet CSS, avec le padding de l'exercice précédent. Ajoute-lui deux déclarations :
- Un cadre en trois morceaux : 2 pixels d'épaisseur, un trait continu, et le rose du club #d45e95
- Des coins arrondis de 12 pixels
Résultat attendu
Un cadre rose fin entoure la carte, et ses quatre coins s'adoucissent. La carte a soudain l'air d'une vraie carte. 🎨
Ce qui est vérifié
- Écrire le raccourci border dans la règle carte
- Fixer l'épaisseur du trait à 2 pixels
- Choisir un trait continu
- Colorer le cadre en rose
- Arrondir les coins de la carte
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)