backgroundpolice et texteborduresmargin et paddingposition et blocslistescolonnespaginationboîtes flexiblesoutil crayon

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,outline,outline-offset
border bordures margins

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 : px,em, %, etc.

border-radius:1em

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.

choix des angles border-radius

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 revu border, on se le demande, CSS est l'art de réinventer l'eau chaude… 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 de la légende d'une table : haut ou bas.

Bordures de styles multiples

L'outil bordures ne permet pas de créer directement 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>

<div class="s1 s2">…</div>

Vous pouvez aussi entrer une bordure composite avec l'outil crayon ou combiner avec celui-ci : les styles communs dans l'outil bordures, les particularités dans l'outil crayon.

Effacer

Cliquez le bouton Effacer ❌ pour effacer les réglages présents.

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…