L'onglet Borders

Introduction

Pour une meilleure compréhension de ce guide, il est conseillé de lire l'article dédié aux conteneurs et aux div.

Les bordures sont un des aspects les plus simples à gérer sur votre site. Le tout est de bien savoir sur quel conteneur vous appliquez vos modifications.

Qu'est-ce qu'une bordure ?

Comme son nom l'indique, une bordure est une ligne, plus ou moins grosse, qui prend place sur les bord d'un élément ou d'un conteneur. Elle permet de délimiter un élément ou d'ajouter un effet de style.

Créer une bordure

Sur votre page Oxygen, cliquez sur le conteneur ou l'élément auquel vous souhaitez ajouter une bordure, et cliquez sur l'onglet borders dans la barre d'édition (à gauche).

Attention, la bordure apparaîtra uniquement lorsque vous aurez configuré les champs color, width et style

Currently Editing

Permet d'éditer individuellement chaque border si besoin. Par défaut, l'option est réglée sur all, c'est-à-dire toutes les bordures d'un coup.

Color

Permet de choisir la couleur de la bordure. Vous pouvez mettre une couleur prédéfinie si vous en avez configuré avec les paramètres de style.

Width

Définit la largeur de la bordure.

Style

Définit le style de la bordure :

None : option par défaut. la bordure est invisible.
Solid : option généralement choisie. La bordure est composée d'un trait unique.
Dashed : La bordure est composée de traits entrecoupés
Dotted : la bordure est composée de points

Ci-dessous, le bouton unset all borders supprime toutes les bordures de l'élément. Utile si vous avez besoin de tout supprimer.

Border radius

Arrondit les angles du conteneur ou des l'élément. Plus le chiffre est grand, plus les coins seront arrondis.

Si vous avez besoin de faire une bordure complètement ronde, mettez 100% de border-radius. Attention, votre conteneur devra être parfaitement carré, ou vous obtiendrez un ovale.

*Border radius de 100%. Remarquez que la border est un peu ovale. En effet, le conteneur n'est pas parfaitement carré.*

Ci-dessous, le bouton edit individual radius vous permet d'éditer individuellement chaque côté de la bordure.

Notez que vous pouvez tout à fait éditer un border-radius sans forcément mettre de bordure. Pour cela, mettez la width de la bordure à 0px, ou définissez le style sur none.

Les marges et le padding

Les bordures étant sur le bord de votre conteneur ou élément, le choix du champ a ici une importance :

Editer la margin augmentera l'espace avec les autres éléments, sans augmenter l'espace avec la bordure
Editer le padding augmentera l'espace avec els autres éléments ET l'espace avec la bordure.