Moxi Design System

# Borders

Visit https://tailwindcss.com/docs/border-radius (opens new window) for more information.

# Border Radius

Class
Properties
rounded-noneborder-radius: 0px;
rounded-smborder-radius: 0.125rem;
roundedborder-radius: 0.19rem;
rounded-mdborder-radius: 0.375rem;
rounded-lgborder-radius: 0.5rem;
rounded-xlborder-radius: 0.75rem;
rounded-2xlborder-radius: 1rem;
rounded-3xlborder-radius: 1.5rem;
rounded-fullborder-radius: 9999px;
rounded-t-noneborder-top-left-radius: 0px; border-top-right-radius: 0px;
rounded-r-noneborder-top-right-radius: 0px; border-bottom-right-radius: 0px;
rounded-b-noneborder-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
rounded-l-noneborder-top-left-radius: 0px; border-bottom-left-radius: 0px;
rounded-t-smborder-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;
rounded-r-smborder-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem;
rounded-b-smborder-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
rounded-l-smborder-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
rounded-tborder-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
rounded-rborder-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
rounded-bborder-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
rounded-lborder-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
rounded-t-mdborder-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;
rounded-r-mdborder-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
rounded-b-mdborder-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
rounded-l-mdborder-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
rounded-r-lgborder-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
rounded-b-lgborder-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
rounded-l-lgborder-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
rounded-t-xlborder-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
rounded-r-xlborder-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
rounded-b-xlborder-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
rounded-l-xlborder-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
rounded-t-2xlborder-top-left-radius: 1rem; border-top-right-radius: 1rem;
rounded-r-2xlborder-top-right-radius: 1rem; border-bottom-right-radius: 1rem;
rounded-b-2xlborder-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem;
rounded-l-2xlborder-top-left-radius: 1rem; border-bottom-left-radius: 1rem;
rounded-t-3xlborder-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
rounded-r-3xlborder-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
rounded-b-3xlborder-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
rounded-l-3xlborder-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px;
rounded-r-fullborder-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
rounded-b-fullborder-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-l-fullborder-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-tl-noneborder-top-left-radius: 0px;
rounded-tr-noneborder-top-right-radius: 0px;
rounded-br-noneborder-bottom-right-radius: 0px;
rounded-bl-noneborder-bottom-left-radius: 0px;
rounded-tl-smborder-top-left-radius: 0.125rem;
rounded-tr-smborder-top-right-radius: 0.125rem;
rounded-br-smborder-bottom-right-radius: 0.125rem;
rounded-bl-smborder-bottom-left-radius: 0.125rem;
rounded-tlborder-top-left-radius: 0.25rem;
rounded-trborder-top-right-radius: 0.25rem;
rounded-brborder-bottom-right-radius: 0.25rem;
rounded-blborder-bottom-left-radius: 0.25rem;
rounded-tl-mdborder-top-left-radius: 0.375rem;
rounded-tr-mdborder-top-right-radius: 0.375rem;
rounded-br-mdborder-bottom-right-radius: 0.375rem;
rounded-bl-mdborder-bottom-left-radius: 0.375rem;
rounded-tl-lgborder-top-left-radius: 0.5rem;
rounded-tr-lgborder-top-right-radius: 0.5rem;
rounded-br-lgborder-bottom-right-radius: 0.5rem;
rounded-bl-lgborder-bottom-left-radius: 0.5rem;
rounded-tl-xlborder-top-left-radius: 0.75rem;
rounded-tr-xlborder-top-right-radius: 0.75rem;
rounded-br-xlborder-bottom-right-radius: 0.75rem;
rounded-bl-xlborder-bottom-left-radius: 0.75rem;
rounded-tl-2xlborder-top-left-radius: 1rem;
rounded-tr-2xlborder-top-right-radius: 1rem;
rounded-br-2xlborder-bottom-right-radius: 1rem;
rounded-bl-2xlborder-bottom-left-radius: 1rem;
rounded-tl-3xlborder-top-left-radius: 1.5rem;
rounded-tr-3xlborder-top-right-radius: 1.5rem;
rounded-br-3xlborder-bottom-right-radius: 1.5rem;
rounded-bl-3xlborder-bottom-left-radius: 1.5rem;
rounded-tl-fullborder-top-left-radius: 9999px;
rounded-tr-fullborder-top-right-radius: 9999px;
rounded-br-fullborder-bottom-right-radius: 9999px;
rounded-bl-fullborder-bottom-left-radius: 9999px;

# Border Width

Class
Properties
border-0border-width: 0px;
border-2border-width: 2px;
border-4border-width: 4px;
border-8border-width: 8px;
borderborder-width: 1px;
border-t-0border-top-width: 0px;
border-r-0border-right-width: 0px;
border-b-0border-bottom-width: 0px;
border-l-0border-left-width: 0px;
border-t-2border-top-width: 2px;
border-r-2border-right-width: 2px;
border-b-2border-bottom-width: 2px;
border-l-2border-left-width: 2px;
border-t-4border-top-width: 4px;
border-r-4border-right-width: 4px;
border-b-4border-bottom-width: 4px;
border-l-4border-left-width: 4px;
border-t-8border-top-width: 8px;
border-r-8border-right-width: 8px;
border-b-8border-bottom-width: 8px;
border-l-8border-left-width: 8px;
border-tborder-top-width: 1px;
border-rborder-right-width: 1px;
border-bborder-bottom-width: 1px;
border-lborder-left-width: 1px;

# Border Opacity

Class
Properties
border-opacity-0--tw-border-opacity: 0;
border-opacity-5--tw-border-opacity: 0.05;
border-opacity-10--tw-border-opacity: 0.1;
border-opacity-20--tw-border-opacity: 0.2;
border-opacity-25--tw-border-opacity: 0.25;
border-opacity-30--tw-border-opacity: 0.3;
border-opacity-40--tw-border-opacity: 0.4;
border-opacity-50--tw-border-opacity: 0.5;
border-opacity-60--tw-border-opacity: 0.6;
border-opacity-70--tw-border-opacity: 0.7;
border-opacity-75--tw-border-opacity: 0.75;
border-opacity-80--tw-border-opacity: 0.8;
border-opacity-90--tw-border-opacity: 0.9;
border-opacity-95--tw-border-opacity: 0.95;
border-opacity-100--tw-border-opacity: 1;

# Border Style

Class
Properties
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-noneborder-style: none;

# Divide Width

Class
Properties
divide-y-0 > * + *--tw-divide-y-reverse: 0; border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
divide-x-0 > * + *--tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-2 > * + *--tw-divide-y-reverse: 0; border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
divide-x-2 > * + *--tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-4 > * + *--tw-divide-y-reverse: 0; border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
divide-x-4 > * + *--tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-8 > * + *--tw-divide-y-reverse: 0; border-top-width: calc(8px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(8px * var(--tw-divide-y-reverse));
divide-x-8 > * + *--tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse)));
divide-y > * + *--tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
divide-x > * + *--tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-reverse > * + *--tw-divide-y-reverse: 1;
divide-x-reverse > * + *--tw-divide-x-reverse: 1;

# Divide Color

Class
Preview 
divide-transparent > * + *
divide-current > * + *
divide-black > * + *
divide-white > * + *
divide-gray-50 > * + *
divide-gray-100 > * + *
divide-gray-200 > * + *
divide-gray-300 > * + *
divide-gray-400 > * + *
divide-gray-500 > * + *
divide-gray-600 > * + *
divide-gray-700 > * + *
divide-gray-800 > * + *
divide-gray-900 > * + *
divide-red-50 > * + *
divide-red-100 > * + *
divide-red-200 > * + *
divide-red-300 > * + *
divide-red-400 > * + *
divide-red-500 > * + *
divide-red-600 > * + *
divide-red-700 > * + *
divide-red-800 > * + *
divide-red-900 > * + *
divide-yellow-50 > * + *
divide-yellow-100 > * + *
divide-yellow-200 > * + *
divide-yellow-300 > * + *
divide-yellow-400 > * + *
divide-yellow-500 > * + *
divide-yellow-600 > * + *
divide-yellow-700 > * + *
divide-yellow-800 > * + *
divide-yellow-900 > * + *
divide-green-50 > * + *
divide-green-100 > * + *
divide-green-200 > * + *
divide-green-300 > * + *
divide-green-400 > * + *
divide-green-500 > * + *
divide-green-600 > * + *
divide-green-700 > * + *
divide-green-800 > * + *
divide-green-900 > * + *
divide-blue-50 > * + *
divide-blue-100 > * + *
divide-blue-200 > * + *
divide-blue-300 > * + *
divide-blue-400 > * + *
divide-blue-500 > * + *
divide-blue-600 > * + *
divide-blue-700 > * + *
divide-blue-800 > * + *
divide-blue-900 > * + *
divide-indigo-50 > * + *
divide-indigo-100 > * + *
divide-indigo-200 > * + *
divide-indigo-300 > * + *
divide-indigo-400 > * + *
divide-indigo-500 > * + *
divide-indigo-600 > * + *
divide-indigo-700 > * + *
divide-indigo-800 > * + *
divide-indigo-900 > * + *
divide-purple-50 > * + *
divide-purple-100 > * + *
divide-purple-200 > * + *
divide-purple-300 > * + *
divide-purple-400 > * + *
divide-purple-500 > * + *
divide-purple-600 > * + *
divide-purple-700 > * + *
divide-purple-800 > * + *
divide-purple-900 > * + *
divide-pink-50 > * + *
divide-pink-100 > * + *
divide-pink-200 > * + *
divide-pink-300 > * + *
divide-pink-400 > * + *
divide-pink-500 > * + *
divide-pink-600 > * + *
divide-pink-700 > * + *
divide-pink-800 > * + *
divide-pink-900 > * + *

# Divide Opacity

Class
Properties
divide-opacity-0--tw-divide-opacity: 0;
divide-opacity-5--tw-divide-opacity: 0.05;
divide-opacity-10--tw-divide-opacity: 0.1;
divide-opacity-20--tw-divide-opacity: 0.2;
divide-opacity-25--tw-divide-opacity: 0.25;
divide-opacity-30--tw-divide-opacity: 0.3;
divide-opacity-40--tw-divide-opacity: 0.4;
divide-opacity-50--tw-divide-opacity: 0.5;
divide-opacity-60--tw-divide-opacity: 0.6;
divide-opacity-70--tw-divide-opacity: 0.7;
divide-opacity-75--tw-divide-opacity: 0.75;
divide-opacity-80--tw-divide-opacity: 0.8;
divide-opacity-90--tw-divide-opacity: 0.9;
divide-opacity-95--tw-divide-opacity: 0.95;
divide-opacity-100--tw-divide-opacity: 1;

# Divide Style

Class
Properties
divide-solid > * + *border-style: solid;
divide-dashed > * + *border-style: dashed;
divide-dotted > * + *border-style: dotted;
divide-double > * + *border-style: double;
divide-none > * + *border-style: none;

# Ring Width

Class
Properties
*box-shadow: 0 0 #0000;
ring-0box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ringbox-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset--tw-ring-inset: inset;

# Ring Opacity

Class
Properties
ring-opacity-0--tw-ring-opacity: 0;
ring-opacity-5--tw-ring-opacity: 0.05;
ring-opacity-10--tw-ring-opacity: 0.1;
ring-opacity-20--tw-ring-opacity: 0.2;
ring-opacity-25--tw-ring-opacity: 0.25;
ring-opacity-30--tw-ring-opacity: 0.3;
ring-opacity-40--tw-ring-opacity: 0.4;
ring-opacity-50--tw-ring-opacity: 0.5;
ring-opacity-60--tw-ring-opacity: 0.6;
ring-opacity-70--tw-ring-opacity: 0.7;
ring-opacity-75--tw-ring-opacity: 0.75;
ring-opacity-80--tw-ring-opacity: 0.8;
ring-opacity-90--tw-ring-opacity: 0.9;
ring-opacity-95--tw-ring-opacity: 0.95;
ring-opacity-100--tw-ring-opacity: 1;

# Ring Offset Width

Class
Properties
ring-offset-0--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-1--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-2--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-4--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-8--tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

← Effects →