Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-shape
Section edge shapes and HR dividers using CSS shape() — wave, chevron, scallop, diagonal patterns with customizable depth.
Overview
The CSS shape() function enables responsive, CSS-native clip-path shapes using any CSS unit. Vanilla Breeze provides a shapes system that adds decorative edge clipping to sections and styled dividers to <hr> elements.
All shapes are guarded by @supports (clip-path: shape(...)) and degrade gracefully to rectangular elements in unsupported browsers. No SVG or JavaScript required.
The shapes system lives in the utils cascade layer, so any theme or component styles can override them.
Section Edges
Apply data-shape-start and data-shape-end to <section>, <article>, <header>, or <footer> to clip the top or bottom edge into a decorative shape.
| Attribute | Values | Effect |
|---|---|---|
data-shape-start |
wave, chevron, scallop, diagonal |
Clips the top edge of the element |
data-shape-end |
wave, chevron, scallop, diagonal |
Clips the bottom edge of the element |
Both attributes can be combined on a single element for different top and bottom shapes.
Section edge examples
<!-- Bottom wave edge --><section data-shape-end="wave"> <h2>Our Services</h2> <p>Content flows into a wave shape at the bottom.</p></section> <!-- Top chevron + bottom scallop --><section data-shape-start="chevron" data-shape-end="scallop"> <h2>Middle section</h2> <p>Chevron top, scallop bottom.</p></section> <!-- Custom depth override --><section data-shape-end="wave" class="subtle-edge"> <h2>Subtle wave</h2></section> <style> .subtle-edge { --shape-depth: 5%; }</style>Padding is automatically added on the clipped side to prevent content from being cut off.
HR Dividers
Class-based shape variants for <hr> elements. These extend the existing hr.decorative pattern.
| Class | Effect | Requires shape() |
|---|---|---|
hr.wave |
Sinusoidal wave line | Yes |
hr.zigzag |
Sharp zigzag line | Yes |
hr.scallop |
Repeating arcs | Yes |
hr.diamonds |
Connected diamond chain | Yes |
hr.dots |
Dot chain via radial-gradient | No — works everywhere |
HR divider variants
<hr class="wave"><hr class="zigzag"><hr class="scallop"><hr class="diamonds"><hr class="dots">All shape-based dividers fall back to a plain 1px <hr> in browsers without shape() support. The hr.dots variant uses radial-gradient and works in all browsers.
Custom Properties
The shapes system registers several @property declarations for animatable, type-safe customization.
| Property | Syntax | Default | Used By |
|---|---|---|---|
--shape-depth |
<percentage> |
15% |
Section edges — how dramatic the edge clip is |
--shape-bevel |
<length> |
20px |
Notched callouts — corner bevel size |
--shape-curve |
<percentage> |
50% |
Reserved for theme overrides |
--shape-border |
<length> |
4px |
Shaped borders — border thickness |
These properties inherit and can be overridden at any level. Theme files (like cyber and kawaii) set their own defaults.
Demos
HR Dividers & Section Edges
Browser Support
The CSS shape() function is supported in all major browsers.
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
clip-path: shape() |
135+ | 148+ | 18.4+ | 135+ |
calc() inside shape() |
135+ | 148+ | 18.4+ | 135+ |
| Custom properties in shape() | 135+ | 148+ | 18.4+ | 135+ |
| Shape animation interpolation | 135+ | 148+ | 18.4+ | 135+ |
Older browsers see plain rectangles. The @supports guard prevents any broken rendering.