Skip to main content

​
Overview

Luminescent UI provides border utilities for creating smooth, superellipse-based rounded corners and gradient borders.

​
rounded-lum

Applies the Luminescent border radius with superellipse corner smoothing.

​
CSS Implementation

@utility rounded-lum {
  border-radius: var(--lum-border-radius);
  corner-shape: superellipse(var(--lum-border-superellipse));
}

​
Usage

<div class="rounded-lum bg-gray-800 p-4">
  Smooth rounded corners
</div>

​
CSS Variables

​
--lum-border-radius
length
default:"var(--radius-lg)"
The border radius value. Typically corresponds to Tailwind’s lg size (~8px).
​
--lum-border-superellipse
number
default:"1"
Superellipse corner smoothing factor:
  • 0 = Perfect circle
  • 1 = Squircle (smooth, Apple-style corners)
  • 2+ = Approaching rounded square
The corner-shape: superellipse() property creates smoother, more aesthetically pleasing corners than standard border-radius. This is the same corner style used by Apple in iOS and macOS.

​
rounded-lum-*

Applies a calculated border radius that’s reduced by a spacing multiplier, useful for nested elements.

​
CSS Implementation

@utility rounded-lum-* {
  border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(integer)));
  corner-shape: superellipse(var(--lum-border-superellipse));
}

​
Usage

<div class="rounded-lum lum-card">
  <div class="rounded-lum-1 bg-gray-800 p-4">
    Inner element with reduced radius
  </div>
</div>

​
Values

​
rounded-lum-1
utility
Radius reduced by 1 spacing unit (~4px)
​
rounded-lum-2
utility
Radius reduced by 2 spacing units (~8px)
​
rounded-lum-3
utility
Radius reduced by 3 spacing units (~12px)
​
rounded-lum-4
utility
Radius reduced by 4 spacing units (~16px)
Use rounded-lum-* utilities when you have nested rounded containers. This ensures the inner element’s corners align perfectly with the outer element’s corners by accounting for the padding.

​
border-gradient-*

Creates a gradient border effect using a pseudo-element.

​
CSS Implementation

@utility border-gradient-* {
  @apply relative box-border bg-clip-padding;
  border-width: calc(--value(integer) * 1px);
  border-color: transparent !important;
  &::before {
    @apply bg-gradient-to-br content-[''] absolute inset-0 z-[-1];
    margin: calc(--value(integer) * -1px);
    border-radius: inherit;
  }
}

​
Usage

<div class="border-gradient-2 rounded-lum bg-gray-900 p-4">
  2px gradient border
</div>

​
Border Widths

​
border-gradient-1
utility
1px gradient border
​
border-gradient-2
utility
2px gradient border (recommended)
​
border-gradient-3
utility
3px gradient border
​
border-gradient-4
utility
4px gradient border

​
How It Works

  1. Sets a transparent border with the specified width
  2. Creates a ::before pseudo-element behind the content
  3. Applies a gradient background to the pseudo-element
  4. Offsets the pseudo-element by negative margin to show through the transparent border
  5. Inherits the border-radius for consistent corner shapes
The border-gradient-* utility uses z-index: -1 on the pseudo-element. Make sure the parent element has a background color, or the gradient will appear behind all content.

​
Customizing Gradients

The default gradient is bg-gradient-to-br (bottom-right diagonal). You can customize it: 
<!-- Top to bottom -->
<div class="border-gradient-2 [&::before]:bg-gradient-to-b"></div>

<!-- Left to right -->
<div class="border-gradient-2 [&::before]:bg-gradient-to-r"></div>

<!-- Radial gradient -->
<div class="border-gradient-2 [&::before]:bg-gradient-radial"></div>

​
Examples

<div class="border-gradient-3 rounded-lum lum-card max-w-md
            [&::before]:from-blue-500 [&::before]:to-purple-500">
  <h3 class="text-2xl font-bold">Pro Plan</h3>
  <p class="text-gray-300">Unlock all premium features</p>
  <button class="lum-btn lum-bg-blue-600">Upgrade Now</button>
</div>

​
Superellipse Corner Shape

The corner-shape: superellipse() property creates smoother corners: 
<div class="rounded-lum [--lum-border-superellipse:1] bg-gray-800 w-32 h-32">
  Squircle
</div>

​
Best Practices

  1. Use rounded-lum for all Luminescent UI components to maintain consistency
  2. Use rounded-lum-* for nested elements to align inner corners with outer corners
  3. Always set a background color when using border-gradient-*
  4. Consider combining border-gradient-* with hover effects for interactive elements
  5. Keep --lum-border-superellipse at 1 for the signature Luminescent look
  6. Use gradient borders sparingly to highlight important or premium elements
  7. Ensure gradient colors have sufficient contrast with the background

Build docs developers (and LLMs) love

Get started for freeTalk to us