Jake Goldsborough

Wavy Border Demo

This page demonstrates the wavy/scalloped border utility available in the site.

Basic Usage

Add the wavy-border class to any element:

Basic Wavy Border

This box has a scalloped edge all around it. The border automatically scales to any size container.

<div class="wavy-border" style="background-color: var(--yellow);">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>

With Shadow

Use wavy-border-shadow for a subtle drop shadow effect:

With Shadow

This version includes a subtle shadow for more depth.

<div class="wavy-border-shadow" style="background-color: var(--aqua);">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>

Different Colors

The border works with any background color:

Purple Frame

Using var(--purple) from the theme

Green Frame

Using var(--green) from the theme

Orange Frame

Using var(--orange) from the theme

<div class="wavy-border" style="background-color: var(--purple);">
  <h3>Purple Frame</h3>
  <p>Content</p>
</div>

Nested Content

The wavy border works with any content inside:

Feature List

  • Automatic scaling
  • Works with any background color
  • CSS-only implementation
  • No JavaScript required
const example = "code blocks work too";

Technical Details

The wavy border is implemented using SVG clip paths defined in the base template. The path is defined once and reused via CSS for efficiency.

Available CSS classes:

Both classes include 2rem of padding by default. Adjust in the CSS if needed.

Color Variables

Use these theme variables for consistent styling: