css border

Bordure en css

Utiliser la propriété border en css

css border, border css, css contour, bordure en css, contour css, border solid, solid css

Date de publication : 2011-02-27 16:23:10

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 :

css 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 :

border css

Image : K38 Rescue

 
 

b1n@sp1n