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-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.

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.

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

Sélectionnez la rubrique « définir image… » du menu local border-style pour spécifier une image de bordure. Un dialogue spécifique permet de choisir l'image utilisée (bouton « Sélectionner image… ») pour dessiner la bordure.

Découpez-l'image (border-slices) au moyen des séparateurs ou renseignez la largeur de chaque côté en nombre de pixels (sans unité). Si les 4 côtés ont la même largeur, cochez la case "lier 4 côtés". Dans les navigateurs Gecko, le milieu de l'image est dessiné comme un fond de l'élément. Une propriété border-width est générée, en cohérence avec les border-slices saisis.
Il est possible, avec certaines images, d'utiliser l'image entière sans découpage au moyen du bouton « image entière ».
Si les séparateurs ne sont pas bien visibles, changez leur couleur au moyen de petite palette palette couleurs areas en bas à droite de l'image.

Choisissez ensuite le mode de répétition en largeur (repeat-x) et en hauteur (repeat-y) de l'image dans la bordure. Si la seconde valeur est omise, les quatre côtés auront la même valeur.

Si vous souhaitez supprimer l'image présente, cliquez le bouton « Aucune image ». « OK » enregistre la saisie, « Annuler » ferme le dialogue sans rien changer.

L'image choisie est dessinée au centre de l'éditeur de bordure.