Mise en forme des bordures en css

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>
border-separate
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-collapse

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>
border-spacing
astuceAstuce : Vous pouvez aussi associer border-style et border-color en une seule ligne:
Exemple
<style type="text/css">
#bordure {
border: 1px solid #000;
}
</style>
Voir/déposer un commentaire (0) | Signaler un problème