Documentation
Documentation - Borders.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Borders
Marssel offers a complete system for managing borders with support for all properties: width, style, color, radius and individual borders per side.
Simple border
Apply a full border with border-:
1px black border
3px blue border
Thin gray border
<!-- Basic border -->
<div class="border-[1px_solid_000000]">
1px black border
</div>
<!-- Thick border -->
<div class="border-[3px_solid_2563eb]">
3px blue border
</div>
<!-- Fine border -->
<div class="border-[0.5px_solid_red]">
Bordure grise fine
</div>Borders per side
Apply specific borders to each side:
Border at top
Border at bottom
Border left
Border on the right
Border x
Border y
<!-- Top border -->
<div class="border-t-[2px_solid_2563eb]">
Border at top
</div>
<!-- Bottom border -->
<div class="border-b-[1px_solid_e5e7eb]">
Border at bottom
</div>
<!-- Border left -->
<div class="border-l-[4px_solid_10b981]">
Border left
</div>
<!-- Border right -->
<div class="border-r-[1px_solid_red]">
Border on the right
</div>
<!-- Border x -->
<div class="border-x-[4px_solid_purple]">
Border x
</div>
<!-- Border y -->
<div class="border-y-[4px_solid_brown]">
Border y
</div>Multiple borders
Combine multiple borders:
Content with top/bottom borders
Differentiated borders
Card with accent
<!-- Top and bottom borders -->
<div class="border-t-[1px_solid_e5e7eb] border-b-[1px_solid_e5e7eb] py-[16px]">
Content with top/bottom borders
</div>
<!-- Different horizontal and vertical borders -->
<div class="border-t-[2px_solid_2563eb] border-b-[2px_solid_2563eb] border-l-[1px_solid_e5e7eb] border-r-[1px_solid_e5e7eb]">
Differentiated borders
</div>
<!-- Accented border on the left -->
<div class="border-[1px_solid_e5e7eb] border-l-[4px_solid_2563eb] p-[16px]">
Card with accent
</div>Border Styles
Use different border styles:
Solid border
Dashed Border
Dotted border
Double border
<!-- Solid (défaut) -->
<div class="border-[2px_solid_000000]">Solid border</div>
<!-- Dashed -->
<div class="border-[2px_dashed_6b7280]">Dashed Border</div>
<!-- Dotted -->
<div class="border-[2px_dotted_6b7280]">Dotted border</div>
<!-- Double -->
<div class="border-[4px_double_2563eb]">Double border</div>Border radius (rounded corners)
Round the corners with rounded-:
Rounded corners 8px
Rounded corners 4px
Rounded corners 16px
Circle
Pill badge
<!-- Full rounding -->
<div class="border-[1px_solid_e5e7eb] rounded-[8px]">
Rounded corners 8px
</div>
<!-- Light rounding -->
<div class="border-[1px_solid_e5e7eb] rounded-[4px]">
Rounded corners 4px
</div>
<!-- Pronounced rounding -->
<div class="border-[1px_solid_e5e7eb] rounded-[16px]">
Rounded corners 16px
</div>
<!-- Full circle -->
<div class="w-[100px] h-[100px] border-[2px_solid_2563eb] rounded-[50%]">
Circle
</div>
<!-- Pill -->
<div class="border-[1px_solid_2563eb] rounded-[999px] px-[20px] py-[8px]">
Pill badge
</div>Radius per corner
Round specific corners:
Top-left rounded
Top-right rounded
Bottom-left rounded
Bottom-right rounded
<!-- Upper left corner -->
<div class="border-[1px_solid_e5e7eb] rounded-tl-[16px]">
Top-left rounded
</div>
<!-- Upper right corner -->
<div class="border-[1px_solid_e5e7eb] rounded-tr-[16px]">
Top-right rounded
</div>
<!-- Bottom left corner -->
<div class="border-[1px_solid_e5e7eb] rounded-bl-[16px]">
Bottom-left rounded
</div>
<!-- Lower right corner -->
<div class="border-[1px_solid_e5e7eb] rounded-br-[16px]">
Bottom-right rounded
</div>Radius per side
Round several corners on one side:
Rounded top
Rounded bottom
Left rounded
Right rounded
<!-- Top corners -->
<div class="border-[1px_solid_e5e7eb] rounded-t-[12px]">
Rounded top
</div>
<!-- Bottom corners -->
<div class="border-[1px_solid_e5e7eb] rounded-b-[12px]">
Rounded bottom
</div>
<!-- Left corners -->
<div class="border-[1px_solid_e5e7eb] rounded-l-[12px]">
Left rounded
</div>
<!-- Right corners -->
<div class="border-[1px_solid_e5e7eb] rounded-r-[12px]">
Right rounded
</div>