CSS & Design
CSS Border Radius Generator
Build CSS border-radius values with individual control over each corner. Toggle between px and % units. Live preview shows exactly how the shape looks. Copy the single-value shorthand or the full 4-corner syntax.
Runs in your browser
Nothing uploaded
Free, no signup
Ctrl + Enter to run · Recent brings back your last inputs · Everything stays in this browser
FAQ
CSS Border Radius Generator: questions
What is the 4-value border-radius syntax?
border-radius: top-left top-right bottom-right bottom-left. You can also use the 8-value / syntax for elliptical corners: each corner gets a horizontal and a vertical radius.
What is the % unit for border-radius?
Percentages are calculated relative to the element's width (for horizontal) and height (for vertical). Setting all corners to 50% on a square element gives a circle.
CSS Minifier & Beautifier
Compress or format CSS
SVG Optimizer
Minify and clean SVG markup
Website Accessibility Audit
Crawl a page for WCAG risks
CSS Grid Generator
Visual grid layout builder
CSS Flexbox Generator
Build flexbox layouts visually with live preview
SVG to CSS Data URI Encoder
SVG as background-image
Made something with AI? Share it as a private link.
Drop in the HTML from Claude, ChatGPT or any editor and get a link your client can open anywhere — with a password, view tracking, comments and approval.