Documentation
Documentation - Borders.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Borders
Marssel propose un système complet pour gérer les bordures avec support de toutes les propriétés : largeur, style, couleur, radius et bordures individuelles par côté.
Bordure simple
Appliquez une bordure complète avec border- :
Bordure noire 1px
Bordure bleue 3px
Bordure grise fine
<!-- Bordure basique -->
<div class="border-[1px_solid_000000]">
Bordure noire 1px
</div>
<!-- Bordure épaisse -->
<div class="border-[3px_solid_2563eb]">
Bordure bleue 3px
</div>
<!-- Bordure fine -->
<div class="border-[0.5px_solid_red]">
Bordure grise fine
</div>Bordures par côté
Appliquez des bordures spécifiques à chaque côté :
Bordure en haut
Bordure en bas
Bordure à gauche
Bordure à droite
Bordure x
Bordure y
<!-- Bordure top -->
<div class="border-t-[2px_solid_2563eb]">
Bordure en haut
</div>
<!-- Bordure bottom -->
<div class="border-b-[1px_solid_e5e7eb]">
Bordure en bas
</div>
<!-- Bordure left -->
<div class="border-l-[4px_solid_10b981]">
Bordure à gauche
</div>
<!-- Bordure right -->
<div class="border-r-[1px_solid_red]">
Bordure à droite
</div>
<!-- Bordure x -->
<div class="border-x-[4px_solid_purple]">
Bordure x
</div>
<!-- Bordure y -->
<div class="border-y-[4px_solid_brown]">
Bordure y
</div>Bordures multiples
Combinez plusieurs bordures :
Contenu avec bordures haut/bas
Bordures différenciées
Card avec accent
<!-- Bordures top et bottom -->
<div class="border-t-[1px_solid_e5e7eb] border-b-[1px_solid_e5e7eb] py-[16px]">
Contenu avec bordures haut/bas
</div>
<!-- Bordures horizontales et verticales différentes -->
<div class="border-t-[2px_solid_2563eb] border-b-[2px_solid_2563eb] border-l-[1px_solid_e5e7eb] border-r-[1px_solid_e5e7eb]">
Bordures différenciées
</div>
<!-- Bordure accentuée à gauche -->
<div class="border-[1px_solid_e5e7eb] border-l-[4px_solid_2563eb] p-[16px]">
Card avec accent
</div>Styles de bordure
Utilisez différents styles de bordure :
Bordure solide
Bordure en tirets
Bordure en pointillés
Bordure double
<!-- Solid (défaut) -->
<div class="border-[2px_solid_000000]">Bordure solide</div>
<!-- Dashed -->
<div class="border-[2px_dashed_6b7280]">Bordure en tirets</div>
<!-- Dotted -->
<div class="border-[2px_dotted_6b7280]">Bordure en pointillés</div>
<!-- Double -->
<div class="border-[4px_double_2563eb]">Bordure double</div>Border radius (coins arrondis)
Arrondissez les coins avec rounded- :
Coins arrondis 8px
Coins arrondis 4px
Coins arrondis 16px
Cercle
Badge pilule
<!-- Arrondi complet -->
<div class="border-[1px_solid_e5e7eb] rounded-[8px]">
Coins arrondis 8px
</div>
<!-- Arrondi léger -->
<div class="border-[1px_solid_e5e7eb] rounded-[4px]">
Coins arrondis 4px
</div>
<!-- Arrondi prononcé -->
<div class="border-[1px_solid_e5e7eb] rounded-[16px]">
Coins arrondis 16px
</div>
<!-- Cercle complet -->
<div class="w-[100px] h-[100px] border-[2px_solid_2563eb] rounded-[50%]">
Cercle
</div>
<!-- Pilule -->
<div class="border-[1px_solid_2563eb] rounded-[999px] px-[20px] py-[8px]">
Badge pilule
</div>Radius par coin
Arrondissez des coins spécifiques :
Top-left arrondi
Top-right arrondi
Bottom-left arrondi
Bottom-right arrondi
<!-- Coin supérieur gauche -->
<div class="border-[1px_solid_e5e7eb] rounded-tl-[16px]">
Top-left arrondi
</div>
<!-- Coin supérieur droit -->
<div class="border-[1px_solid_e5e7eb] rounded-tr-[16px]">
Top-right arrondi
</div>
<!-- Coin inférieur gauche -->
<div class="border-[1px_solid_e5e7eb] rounded-bl-[16px]">
Bottom-left arrondi
</div>
<!-- Coin inférieur droit -->
<div class="border-[1px_solid_e5e7eb] rounded-br-[16px]">
Bottom-right arrondi
</div>Radius par côté
Arrondissez plusieurs coins d'un côté :
Haut arrondi
Bas arrondi
Gauche arrondi
Droite arrondi
<!-- Coins supérieurs -->
<div class="border-[1px_solid_e5e7eb] rounded-t-[12px]">
Haut arrondi
</div>
<!-- Coins inférieurs -->
<div class="border-[1px_solid_e5e7eb] rounded-b-[12px]">
Bas arrondi
</div>
<!-- Coins gauches -->
<div class="border-[1px_solid_e5e7eb] rounded-l-[12px]">
Gauche arrondi
</div>
<!-- Coins droits -->
<div class="border-[1px_solid_e5e7eb] rounded-r-[12px]">
Droite arrondi
</div>