Bordures
border-collapse, border-color, border-radius, border-spacing, border-style, border-width, border-image, caption-side, empty-cells,outline,outline-offset

border-style ▾ (style du trait de bordure)Le menu local détermine l'aspect du trait de bordure :
La valeur "définir image…" permet de spécifier une image de bordure. CôtésCochez les cases correspondant aux côtés où la bordure apparaît. border-width (épaisseur)Unité de longueur :
border-radius (arrondi des angles)Unité de longueur donnant l'arrondi à réaliser dans chaque coin : px,em, %, etc. border-radius:1em
Le bouton « » ouvre un dialogue permettant de spécifier quels angles de la boîte seront arrondis. Cliquer le ou les angles désirés.![]() |
border-colorCliquez le bouton OutlineOutline, contour de boîteDe 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-offsetEspace supplémentaire entre l'extérieur de la boîte et le contour. Tablesborder-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 multiplesL'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. EffacerCliquez 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…