Les bordures

jdb-border

Il est inutile de mettre plus d'une classe jdb-border-color ou jdb-border-wx ou jdb-hover-border-color ou encore jdb-round-size à un élément, car une seule classe par type sera appliquée.

Ajout de bordures

Les classes jdb-border, jdb-border-position sont utilisées pour ajouter une bordure sur un ou plusieurs côtés de n'importe quel élément HTML. Les bordures de JdB.CSS offrent deux niveaux d'épaisseur (1px et 6px) et peuvent également être colorées.

Bordures simples

Là, j'ai une bordure sur les 4 côtés.

Code :

<div class="jdb-panel jdb-border">
  <p>Là, j'ai une bordure sur les 4 côtés.</p>
</div>

Je n'ai plus qu'une bordure à gauche.

Code :

<div class="jdb-panel jdb-border-left">
  <p>Je n'ai plus qu'une bordure à gauche.</p>
</div>

Bordures colorées

Les classes jdb-border-color sont utilisées pour ajouter des couleurs aux bordures. Elles vont toujours de paire avec les classes jdb-border, jdb-border-position ou jdb-positionbar.

J'ai une bordure en haut et une autre en bas, et elles sont vertes.

Code :

<div class="jdb-panel jdb-border-top jdb-border-bottom jdb-border-green">
  <p>J'ai une bordure en haut et une autre en bas, et elles sont vertes.</p>
</div>

Ma bordure rouge devient bleu lorsque vous me survolez avec le curseur.

Code :

<div class="jdb-panel jdb-border jdb-border-red jdb-hover-border-blue">
  <p>Ma bordure rouge devient bleu lorsque vous me survolez avec le curseur.</p>
</div>

J'ai une bordure rouge et une couleur d'arrière-plan bleu pâle.

Code :

<div class="jdb-panel jdb-border jdb-border-blue jdb-pale-blue">
  <p>J'ai une bordure rouge et une couleur d'arrière-plan rouge pâle.</p>
</div>

Bordures en pointillés

Les classes jdb-border-dashed et jdb-border-dotted peuvent apporter chacune un style de bordure en pointillé à n'importe qu'elle élément.

J'ai une bordure en pointillé avec des tirets.

J'ai une bordure en pointillé avec des points.

Code :

<div class="jdb-container jdb-border jdb-border-w2 jdb-border-dashed">
  <p>J'ai une bordure en pointillé avec des tirets.</p>
</div>

<div class="jdb-container jdb-border jdb-border-w2 jdb-border-dotted">
  <p>J'ai une bordure en pointillé avec des points.</p>
</div>

Bordures épaisses

Les classes jdb-topbar, jdb-bottombar, jdb-leftbar et jdb-rightbar sont utilisées pour ajouter des bordures épaisses à un élément. Contrairement à la classe jdb-border, les bordures épaisses de JdB.CSS ne peuvent pas être arrondies, à moins que vous ajoutez un style personnalisé.

J'ai une bordure épaisse à gauche.

Code :

<div class="jdb-panel jdb-leftbar">
  <p>J'ai une bordure épaisse à gauche.</p>
</div>

Code :

<div class="jdb-panel jdb-topbar jdb-bottombar jdb-border-blue">
  <p>Mes deux bordures d'en haut et d'en bas deviennent épaisses et bleues.</p>
</div>

D'autres épaisseurs sont jdb-border-w1, jdb-border-w2, jdb-border-w3, jdb-border-w4 et jdb-border-w5.

Code :

<div class="jdb-container jdb-border jdb-border-w5">
  <p>D'autres épaisseurs sont jdb-border-w1, jdb-border-w2, jdb-border-w3, jdb-border-w4 et jdb-border-w5.</p>
</div>

Bordures arrondies

Pour ajouter des bordures arrondies, ajoutez l'une des classes jdb-round-size.

J'ai une bordure arrondie de 4px sur chaque coin.

Code :

<div class="jdb-panel jdb-border jdb-round">
  <p>J'ai une bordure arrondie de 4px sur chaque coin.</p>
</div>

Et maintenant j'ai une bordure arrondie de 16px sur chaque coin.

Code :

<div class="jdb-panel jdb-border jdb-round-xlarge">
  <p>Et maintenant j'ai une bordure arrondie de 16px sur chaque coin.</p>
</div>

En fin, une bordure arrondie de 32px sur les coins du haut.

Code :

<div class="jdb-panel jdb-border jdb-round-top-xxlarge">
  <p>En fin, une bordure arrondie de 32px sur les coins du haut.</p>
</div>

Pour en savoir plus sur comment arrondir les bordures avec JdB.CSS, veuillez consulter le chapitre sur les arrondissements.

Bordures survolables

Les classes de couleur des bordures jdb-hover-border-color changent la couleur des bordures au survol du curseur.

Bordure qui devient rouge au survole du curseur.

Bordure rouge qui devient vert au survole du curseur.

Code :

<div class="jdb-panel jdb-border jdb-hover-border-red">
  <p>Bordure qui devient rouge au survole du curseur.</p>
</div>

<div class="jdb-panel jdb-border jdb-border-red jdb-hover-border-green">
  <p>Bordure rouge qui devient vert au survole du curseur.</p>
</div>

Bordure épaisse bleu (invisible) qui devient visible au survole du curseur.

Bordure épaisse bleu qui devient vert au survole du curseur.

Code :

<div class="jdb-panel jdb-leftbar jdb-border-white jdb-hover-border-blue">
  <p>Bordure qui devient rouge au survole du curseur.</p>
</div>

<div class="jdb-panel jdb-bottombar jdb-border-blue jdb-hover-border-green">
  <p>Bordure épaisse bleu qui devient vert au survole du curseur.</p>
</div>