This collection offers creative ways to build decorative frames that go beyond the standard border property. It explores the power of border-image combined with gradients to create complex patterns without external files, alongside the use of clip-path and masks for non-standard geometric frames. Special attention is paid to animated effects: ::before and ::after pseudo-elements are leveraged to create “drawing” borders and moving contours, adding dynamics and interactivity to the interface.
20 CSS Frames
Images Inside Wiggly Boxes
A decorative image frame created entirely with CSS mask compositing. It combines radial-gradient layers with conic-gradient and the intersect composite operator to sculpt a scalloped, wavy border, while the CSS round() function ensures perfect pattern alignment along the edges.
See the Pen Images Inside Wiggly Boxes.
Art Deco Card
An elegant Art Deco style card created purely with CSS/SCSS, utilizing a sophisticated technique with pseudo-elements to construct complex, multi-layered geometric borders and corners.
See the Pen Art Deco Card.
Fancy Title with CSS Responsive Frame
Creating a complex decorative title where breaks in the border are elegantly implemented using CSS Grid and pseudo-elements. Padding sizes adapt dynamically thanks to a CSS variable calculated by a mixin.
See the Pen Fancy Title with CSS Responsive Frame.
CSS3 Picture Frame
A pure CSS image styling technique that creates a realistic framed effect using concentric pseudo-elements.
See the Pen CSS3 Picture Frame.
