Bordures

propriétés gérées:
border-collapse, border-color, border-radius, border-spacing, border-style, border-width, border-image, caption-side, empty-cells
border bordures arrondis

border-style (style du trait de bordure)

Le menu local border-style détermine l'aspect du trait de bordure :

none dotted dashed
solid double groove
ridge inset outset

La valeur "définir image…" permet de spécifier une image de bordure.

Côtés

Cochez les cases correspondant aux côtés où la bordure apparaît.

border-width (épaisseur)

Unité de longueur :

  • Valeur par mots-clés : thin | medium | large .
  • Longueur ou pourcentage. Si vous entrez un nombre (entier ou avec virgule), l'unité de longueur par défaut est px. Les unités possibles sont : px = nombre de pixels (unité par défaut), % = pourcentage, cm = centimètre, mm = millimètre, pt = point, em = valeur de font-size, ex = valeur de x-height, in = inch, pc = pica.
  • Une case vide signifie «pas de valeur».

border-radius (arrondi des angles)

Unité de longueur donnant l'arrondi à réaliser dans chaque coin.

exemple

Le bouton « Angles » ouvre un dialogue permettant de spécifier quels angles de la boîte seront arrondis. Cliquer le ou les angles désirés.

arrondi des angles de bordure

border-color

Cliquez le bouton border-color pour accéder aux sélecteur de couleurs ou entrez directement une valeur dans le champs de saisie. Voir saisie des couleurs.

Outline

Outline, contour de boîte

De manière similaire à une bordure, un contour s'applique à une boîte : mais contrairement à la bordure, il se situe à l'extérieur des marges. Pourquoi ne pas avoir revue border, on se le demande ? Comme c'est soit l'une soit l'autre, une case à cocher génère la nouvelle propriété et ouvre un champs supplémentaire :

Outline-offset

Espace supplémentaire entre l'extérieur de la boîte et le contour.

Tables

border-collapse (fusion des bordures)

Utile pour les bordures de cellules de TABLE : collapse permet la fusion des bordures de cellules adjacentes, separate crée des bordures distinctes.

border-spacing (espacement entre cellules) :

Analogue à une margin; ne fonctionne qu'avec des bordures de cellules séparées : 1 (ou 2) unité de longueur.

empty-cells (cellule vides)

Détermine le tracé visible ou non de la bordure des cellules vides.

Caption (légende de table)

Position d'une légende de la table : haut ou bas.

Bordures de styles multiples

HTML Styles ne permet pas de créer une bordure dans laquelle chaque côté possède un style différent : couleur, style ou épaisseur du trait.
Dans ce cas, créez autant de sélecteurs que nécessaire, et utilisez les de manière combinée :

<style type="text/css">
.s1 { border-right: 3px solid royalblue; }
.s2 { border-bottom: 3px dotted orange;}
</style>


<td class="s1 s2">...</td>

Effacer réinitialiser les réglages de styles

Cliquez ce bouton pour effacer les réglages présents.

Saisie d'une border-image

La saisie d'une image de bordure a été supprimée : elle est peu utilisée, mal supportée par les navigateurs et incompatible avec un arrondi de bordure. Mais vous pouvez la gérer en propriété spécifique si vous en avez besoin…