JdB.CSS BETA

Les arrondissements

jdb-round


Partager cette page

Les classes de bordures arrondies

Ajoutez une des classes .jdb-round-size d'arrondissement à n'importe quel élément pour arrondir facilement ses coins ou pour lui retirer ses arrondissements.

Certaines classes ont un ou plusieurs synonymes plus raccourcis, particulièrement pour les noms de tailles :

  • medium → md
  • large → lg
  • xlarge → xl
  • xxlarge → xxl

Il est inutile et déconseillé d'utiliser plusieurs classes pour un même élément. Une seule classe lui sera appliqué.

Cliquez sur une des images ci-dessous pour copier sa classe d'arrondissement :

75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75 75x75
Code :
<img src="/assets/img/test.png" alt="Test" class="jdb-round-sm">
<img src="/assets/img/test.png" alt="Test" class="jdb-round">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-lg">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-xl">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-xxl">

<img src="/assets/img/test.png" alt="Test" class="jdb-circle">

<img src="/assets/img/test.png" alt="Test" class="jdb-round-top">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-top-lg">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-top-xl">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-top-xxl">

<img src="/assets/img/test.png" alt="Test" class="jdb-round-right">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-right-lg">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-right-xl">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-right-xxl">

<img src="/assets/img/test.png" alt="Test" class="jdb-round-bottom">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-bottom-lg">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-bottom-xl">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-bottom-xxl">

<img src="/assets/img/test.png" alt="Test" class="jdb-round-left">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-left-lg">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-left-xl">
<img src="/assets/img/test.png" alt="Test" class="jdb-round-left-xxl">

<img src="/assets/img/test.png" alt="Test" class="jdb-round-0">

Partager cette page