Four-Corner CSS Border Radius
Adjust eight independent percentage radii to preview an organic shape and generate border-radius CSS with separate horizontal and vertical axes. Choose droplet, pebble or bubble presets and optional motion. The optional JSON workspace still returns four pixel radii.
About this four-corner css border radius
Adjust eight independent percentage radii to preview an organic shape and generate border-radius CSS with separate horizontal and vertical axes. Choose droplet, pebble or bubble presets and optional motion. The optional JSON workspace still returns four pixel radii Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.
Image processing & canvas pipeline
Provides eight independent integer percentage radii, four horizontal and four vertical, live shape preview, droplet/pebble/bubble presets and optional 300 ms transitions respecting reduced motion. The optional four-corner JSON workspace preserves pixel-radius conversion. CSS proportionally scales overlapping radii to fit the box.
Worked image transformation example
Scenario: Generate four pixel corner radii.
Sample input:
Processing: Clamp each value to zero or above and format one CSS declaration.
Illustrative output:
Resolution, dimension & memory limits
Operational constraints and validation boundaries: Each axis uses 0–100% in 1% steps. Horizontal percentages use the box width; vertical percentages use its height. CSS scales overlapping radii together to fit. Transitions take 300 ms and respect reduced motion. The JSON example below belongs to the optional px workspace. No CSS parser, image export or batch mode.
Four-Corner CSS Border Radius image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.
In-memory image processing boundary
File buffers and document assets in Four-Corner CSS Border Radius are processed in-memory via local browser APIs with zero file uploads to CZOA servers.
Image format & W3C Canvas standards
W3C Canvas 2D context specifications and standard image container formats:
- CSS Backgrounds and Borders Module Level 3 (four pixel corner radii only)
Four-Corner CSS Border Radius verification · Audit standards
How to use it
- Choose a droplet, pebble or bubble preset, then adjust four horizontal and four vertical sliders.
- Read the live preview and CSS. Droplet starts with border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.
- Toggle animation as needed; reduced-motion preferences disable transitions.
Frequently asked questions
How is the CSS border radius string calculated?+
Each axis uses 0–100% in 1% steps.
Which controls are available?+
Boundary constraints concerning "Which controls are available?" prevent invalid parameter state mutations client-side.
Which limits matter?+
Runtime handling of "Which limits matter?" executes synchronously in your browser tab without remote delays.
What result should the documented example produce?+
Optional four-corner JSON workspace (px): For {"topLeft":30,"topRight":70,"bottomRight":70,"bottomLeft":30}, the output is exactly `border-radius: 30px 70px 70px 30px;`.