Mise en forme des bordures en css

Vous êtes ici : Accueil >> CSS >> Propriétées et mises en forme CSS >> Mise en forme des bordures en css

Mise en forme des bordures en css

border-color
border-style
border-collapse
border-spacing

border-color

La propriété border-color permet de définir la couleur des bordures.

Exemple

<style type="text/css">
.couleur-noir { border-color: #000000;}
</style>

border-style

La propriété border-style permet de définir le style des bordures. Il existe beaucoup de style :
(solid, dashed, dotted, double, inherit, groove, ridge, inset, outset)

Exemple

<style type="text/css">
.bordure-solide { border-style: solid;}
.bordure-pointiller { border-style: dotted;}
</style>

border-collapse

La propriété border-collapse permet de définir l'affichage des bordures d'un tableau (collapse, separate, inherit) .
collapse : chaque cellule a une bordure commune.
separate : chaque cellule a sa propre bordure.
inherit : hérite de son parent (css 2).

Exemple border-collapse: separate;

<style type="text/css">
table {
border: 1px solid #000;
border-collapse: separate;
width: 150;
}
td {
background:#ff0000;
border: 1px solid #000;
}
  </style>
 
<table>
  <tbody>
    <tr>
      <td>border-separate</td>
      <td>border-separate</td>
    </tr>
  </tbody>
</table>

Exemple border-collapse: collapse;

<style type="text/css">
table {
border: 1px solid #000;
border-collapse:  collapse;
width: 150;
}
td {
background:#ff0000;
border: 1px solid #000;
}
  </style>
 
<table>
  <tbody>
    <tr>
      <td>border-collapse</td>
      <td>border-collapse</td>
    </tr>
  </tbody>
</table>

border-spacing

La propriété border-spacing permet de définir l'espacement entre chaque cellule d'un tableau.

Exemple

<style type="text/css">
table {
border: 1px solid #000;
border-spacing: 10px;
width: 150;
}
td {
background:#ff0000;
border: 1px solid #000;
}
  </style>
 
<table>
  <tbody>
    <tr>
      <td>border-spacing</td>
      <td>border-spacing</td>
    </tr>
  </tbody>
</table>

Astuce : Vous pouvez aussi associer border-style et border-color en une seule ligne:

Exemple

<style type="text/css">
#bordure {
border: 1px solid #000;
}
</style>

Catégorie CSS

Commentaire sur : Mise en forme des bordures en css

Signaler une erreur

Propriété paddingPropriétées et mises en forme CSS Propriété de mise en forme du texte en css

Mise en forme des bordures en css