Border
Utility class to organize and implement border
Read all border utilitiesBorder-color​
Light mode only
<article class="card p-x-6 bg-yellow-100 border-yellow-200 ">
<span class="badge badge-icon-md bg-yellow-300 lime-900 m-b-8">
<svg></svg>
</span>
<div class="flex flex-column ">
<p class=" font-medium m-b-2 font-size-sm line-h-xs">
Customize sites with style agnostic library
</p>
</div>
</article>
With dark mode
<article
class="card p-x-6 bg-yellow-100 border-yellow-200 dark-bg-gray-800 dark-border-gray-700"
>
<span
class="badge badge-icon-md bg-yellow-300 dark-bg-yellow-800 dark-white lime-900 m-b-8"
>
<svg></svg>
</span>
<div class="flex flex-column ">
<p class=" font-medium m-b-2 font-size-sm line-h-xs">
Customize sites with style agnostic library
</p>
</div>
</article>
Class selectors | Type | Properties & values |
---|---|---|
.border-gray-700 | light mode | border: 1px solid var(--rbrh-gray-700); |
.border-blue-700 | light mode | border: 1px solid var(--rbrh-blue-700); |
[data-theme="dark"] .dark-border-green-400 | dark mode | border: 1px solid var(--rbrh-green-400); |
[data-theme="dark"] .dark-border-red-400 | dark mode | border: 1px solid var(--rbrh-red-400); |
Border-width​
Ravenbright border utilities are started with the prefix border-
.
It controls the border color of an element using the border- utilities.
Class selectors | Properties & values |
---|---|
.border-1 | border-width: 1px; |
.border-2 | border-width: 2px; |
.border-3 | border-width: 3px; |
.border-4 | border-width: 4px; |
.border-6 | border-width: 6px; |
.border-8 | border-width: 8px; |
.border-10 | border-width: 10px; |
Border-radius​
Class selectors | Properties & values |
---|---|
.radius-xs | border-radius:var(--rbrh-radius-xs); |
.radius-sm | border-radius:var(--rbrh-radius-sm); |
.radius-md | border-radius:var(--rbrh-radius-md); |
.radius-lg | border-radius:var(--rbrh-radius-lg); |
.radius-xl | border-radius:var(--rbrh-radius-xl); |