Border

Utility class to organize and implement border

Read all border utilities

Border-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);