🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Border

Border utility classes:

Class Description
.border border: 1px solid var(--color-contrast-low);
.border-top border-top: 1px solid var(--color-contrast-low);
.border-bottom border-bottom: 1px solid var(--color-contrast-low);
.border-left border-left: 1px solid var(--color-contrast-low);
.border-right border-right: 1px solid var(--color-contrast-low);
.border-2 border-width: 2px;
.border-3 border-width: 3px;
.border-4 border-width: 4px;
.border-contrast-lower border-color: var(--color-contrast-lower);
.border-contrast-low border-color: var(--color-contrast-low);
.border-contrast-medium border-color: var(--color-contrast-medium);
.border-contrast-high border-color: var(--color-contrast-high);
.border-contrast-higher border-color: var(--color-contrast-higher);
.border-primary-darker border-color: var(--color-primary-darker);
.border-primary-dark border-color: var(--color-primary-dark);
.border-primary border-color: var(--color-primary);
.border-primary-light border-color: var(--color-primary-light);
.border-primary-lighter border-color: var(--color-primary-lighter);
.border-accent-darker border-color: var(--color-accent-darker);
.border-accent-dark border-color: var(--color-accent-dark);
.border-accent border-color: var(--color-accent);
.border-accent-light border-color: var(--color-accent-light);
.border-accent-lighter border-color: var(--color-accent-lighter);
.border-success-darker border-color: var(--color-success-darker);
.border-success-dark border-color: var(--color-success-dark);
.border-success border-color: var(--color-success);
.border-success-light border-color: var(--color-success-light);
.border-success-lighter border-color: var(--color-success-lighter);
.border-warning-darker border-color: var(--color-warning-darker);
.border-warning-dark border-color: var(--color-warning-dark);
.border-warning border-color: var(--color-warning);
.border-warning-light border-color: var(--color-warning-light);
.border-warning-lighter border-color: var(--color-warning-lighter);
.border-error-darker border-color: var(--color-error-darker);
.border-error-dark border-color: var(--color-error-dark);
.border-error border-color: var(--color-error);
.border-error-light border-color: var(--color-error-light);
.border-error-lighter border-color: var(--color-error-lighter);
.border-white border-color: var(--color-white);
.border-black border-color: var(--color-black);

If you use a border utility class, you can modify the border opacity using one of the following classes:

Class Description
.border-opacity-0 border opacity 0%
.border-opacity-10% border opacity 10%
.border-opacity-20% border opacity 20%
.border-opacity-30% border opacity 30%
.border-opacity-40% border opacity 40%
.border-opacity-50% border opacity 50%
.border-opacity-60% border opacity 60%
.border-opacity-70% border opacity 70%
.border-opacity-80% border opacity 80%
.border-opacity-90% border opacity 90%

Usage example:

<div class="border border-2 border-opacity-70%"> <!-- content --> </div> 

How to create custom border opacity classes:

.border-opacity-075\% {
  --border-o: 0.075;
}

.border-opacity-15\% {
  --border-o: 0.15;
}

If you want to store a default opacity value for your borders:

// 👇 if you want to use the same value for all themes
// :root, [data-theme="dark"] {
  // ...
// }

:root {
  --color-border-alpha: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
}

[data-theme="dark"] { // dark theme
  --color-border-alpha: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.12);
}

.border-alpha { // utility class
  border-color: var(--color-border-alpha);
}

You can then use it in combo with the .border classes:

<div class="border-bottom border-alpha"></div>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us