Adjust visual controls and validate the result directly in the browser.
HTML copied to clipboard
<div class="corner-shape"></div>Interactive lab for modern CSS and HTML
Playgrounds and generators for modern CSS and HTML
BaselineLab helps you test emerging CSS and HTML features, preview the result instantly, and copy the generated code without leaving the browser.
Compare physical and logical properties, switch units, and copy the generated CSS.
Use each lab as a generator, a playground, and a quick syntax reference.
CSS corner-shape playground
Experiment with corner-shape and border-radius to build rounded, beveled, notched, or scooped corners by corner or pair with modern CSS.
URL copied to clipboard
corner-shape
HTML
CSS
CSS copied to clipboard
.corner-shape {
border-radius: 40px;
corner-shape: round;
}Explore labs by technology
Start with the live CSS playgrounds available today or jump into the HTML section to follow the next wave of interactive experiments.
Open the active CSS generators to test `accent-color`, `color-mix()`, `contrast-color()`, backgrounds, borders, and spacing, compare modern properties, and copy production-ready code.
Visit the BaselineLab HTML playgrounds section to track how upcoming interactive labs will cover native APIs, elements, and modern markup patterns.
Frequently asked questions about BaselineLab
Find quick answers about how this interactive CSS and HTML lab works, what Baseline means here, and what kind of code you can reuse.
What can you do in BaselineLab?
BaselineLab works as a CSS playground, an HTML playground, and a visual generator for modern web APIs. Each lab lets you tweak controls, preview the result in real time, compare physical and logical properties, and copy the resulting code into real projects.
What does Baseline mean here?
In BaselineLab, Baseline acts as a quick compatibility reference so you can judge whether a modern CSS or HTML feature has enough browser support for current production work. That helps you experiment with new APIs while keeping implementation decisions grounded.
What kind of code can you copy from a lab?
The labs are built to generate production-ready CSS and, when relevant, reusable HTML or markup patterns that are easy to adapt. The goal is to make BaselineLab useful both as a CSS generator and as a practical reference for modern syntax you can ship.
Who is BaselineLab for?
BaselineLab is aimed at front-end developers, technical designers, design system teams, and anyone learning modern CSS and HTML through visual experimentation. It is also useful when you need to evaluate a feature before documenting it or introducing it into a shared component library.
What is the difference between a CSS lab and an HTML lab?
A CSS lab focuses on properties, values, and visual combinations that generate reusable styles, while an HTML lab is more focused on elements, attributes, and native patterns with a stronger structural view. In both cases, BaselineLab is designed to provide context, instant feedback, and copy-friendly code.