Pour créer des bordures en css en css il faut utiliser l'attribut border.
Border
Voici un exemple d'utilisation de la propriété border en css :
.maclasse {
border: solid 1px red;
}
La définition d'une bordure en css se fait en trois parties :
- La largeur de la bordure (border-width)
- Le style de la bordure (border-style)
- La couleur de la bordure (border-color)
Ainsi le code css précédent utilisant la propriété border est équivalent à celui ci :
.maclasse {
border-width:1px;
border-style:solid;
border-color:red;
}
Border width
La propriété border-width peut être définie de manière numérique avec les unités px, %, pt ou em. A cette possibilité s'ajoute 3 valeurs prédéfinies :
- thin : fine
- medium : moyenne
- thick : épaisse
Border Style
La propriété border-style permet de définir des effets sur la bordure. Les différents styles de bordure utilisables en css sont les suivants :
- dotted : pointillés
- dashed : tirets
- solid : trait plein
- double : double trait
- groove : bordure en creusée
- ridge : bordure en arrête
- inset : bordure 3D effet enfoncé
- outset : bordure en 3D effet sorti
- none : pas de bordure
Voici une image qui vous montre chaque effet de la propriété border style :
Border Color
La propriété border-color prend pour valeur une couleur css. Pour définir une couleur de bordure en css vous avez trois possibilités :
- Une couleur définie : red
- Une valeur RGB : rgb(255,0,0)
- Une valeur en hexadécimal : #ff0000
A noter que la valeur "transparent" est aussi possible.
Définition de bordure cotés par cotés
Avec la propriété border il est possible de définir une bordure différente pour chaque cotés d'un élément.
.maclasse {
border-top:solid 5px red;
border-right:solid 5px green;
border-bottom:solid 5px blue;
border-left:solid 5px yellow;
}
Le résultat en image de cette utilisation de border en css :
Image : K38 Rescue
