Bordure CSS
Bordure CSS
Dans ce chapitre, nous allons parler de border et apprendrons comment on peut donner des styles à leur. On peut donner un style, une largeur ou une couleur à notre bordure.
Premièrement, voyons les styles des bordures.
Les valeurs de style de bordure sont:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Largeur de bordure
La propriété border-width est utilisée pour définir la largeur de la bordure.
La largeur est définite en pixels, ou en utilisant l'une des trois valeurs prédéfinies: thin, medium, ou thick.
Note: La propriété border-width ne fonctionne pas si elle est utilisée seule. Utilisez la propriété border-style pour définir tout d'abord la bordure.
Couleur de bordure
La propriété border-color est utilisée pour définir la couleur de la bordure. La couleur peut être définie par:
- name - spécifier un nom de la couleur, comme "red"
- RGB - spécifier une valeur RGB, comme "rgb(255,0,0)"
- Hex - spécifier une valeur hex, comme "#ff0000"
Note: La propriété border-color ne fonctionne pas si elle est utilisée seule. Utilisez la propriété border-style pour définir tout d'abord les bordures.
En général, on écrit ces 3 propriétés ensemble sur une ligne.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Exemple avec une bordure bleu en pointillé.</p>
<p style="border:3px dashed #ffff00"> Exemple avec une bordure jaune de tirets. </p>
<p style="border:3px solid #8ebf42"> Exemple avec une bordure verte solide.</p>
</body>
</html>Vous pouvez voir d'autres exemples avec notre outile Créateur CSS.
Pratiquez vos connaissances
