FreeKit is a collection of free online tools for developers, SEO professionals, designers, students, content creators, and everyday users.

Are all tools completely free?

Yes. Every tool on FreeKit is free to use without subscriptions or hidden charges.

Do I need to create an account?

No. You can use all tools instantly without creating an account.

No. Most tools process data locally in your browser, and we do not permanently store your inputs.

Can I use FreeKit on mobile devices?

Yes. Every tool is fully responsive and works on smartphones, tablets, laptops, and desktop computers.

How often are new tools added?

We regularly add new tools and improve existing ones based on user feedback and industry needs.

Which browsers are supported?

FreeKit supports all modern browsers, including Chrome, Edge, Firefox, Safari, and other Chromium-based browsers.

Can I share these tools with others?

Absolutely. You are welcome to share FreeKit with friends, colleagues, students, and your team.

What is CSS border-radius?

The CSS border-radius property rounds the corners of an element's outer border edge. It accepts one or more length or percentage values that define the radius of the quarter ellipse that forms each corner. For example, border-radius: 8px; applies an 8px radius to all four corners, giving the element a softly rounded appearance. The property works on any element with a visible background, border, or box-shadow. It is one of the most commonly used CSS properties for modern UI design, enabling everything from subtle rounded cards to fully circular elements.

What is the difference between the shorthand and individual corner properties?

The border-radius shorthand lets you set all four corners in a single declaration using one to four values. With one value (e.g., border-radius: 10px), all corners are equal. With two values (e.g., 10px 20px), the first applies to top-left and bottom-right, and the second to top-right and bottom-left. With four values (e.g., 10px 20px 30px 40px), they apply clockwise starting from the top-left. Alternatively, you can use individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius for explicit per-corner control.

How do I create an elliptical border-radius?

To create an elliptical (non-circular) border radius, you provide two values separated by a slash for each corner. The first value is the horizontal radius and the second is the vertical radius. For example, border-radius: 20px / 10px creates corners that are twice as wide as they are tall. You can also apply this per-corner: border-radius: 30px 10px 20px 40px / 40px 20px 10px 30px. This gives you full control over the shape of each corner independently in both axes, enabling organic, flowing shapes.

Does border-radius work on all HTML elements?

The border-radius property works on all elements, but the visual effect depends on the element's rendering. For elements with a visible background-color, border, or box-shadow, the rounded corners are immediately visible. However, on elements with overflow: visible, child content may extend beyond the rounded corners. For images, border-radius clips the image within the rounded shape. For table elements with border-collapse: collapse, border-radius is ignored in most browsers. Always pair border-radius with overflow: hidden if you need child content to be clipped to the rounded shape.

What is the difference between percentage and pixel values for border-radius?

Pixel values create a fixed-radius corner regardless of the element's size. Percentage values are calculated relative to the element's dimensions. For a square element, 50% creates a perfect circle. For a rectangle, 50% creates an elliptical shape where the horizontal and vertical radii are proportional to the element's width and height. Percentages are ideal for responsive designs because the rounding scales with the element. Pixel values are better when you need consistent corner sizes across elements of different dimensions, such as a design system with a fixed 8px corner radius.

What is the browser support for CSS border-radius?

CSS border-radius is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It has been supported since Chrome 4, Firefox 4, Safari 5, and IE9. For very old browsers (Safari 4 and earlier, Android 2.1 and earlier), the -webkit- prefix was required, but this is no longer necessary in production code today. Border-radius is one of the most widely supported CSS3 properties and can be used without any vendor prefixes or fallbacks in modern web development.

How does border-radius interact with overflow?

By default, border-radius only rounds the element's background, border, and box-shadow. Child content can still render in the square corner areas outside the rounded shape. To clip child content to the rounded corners, you must add overflow: hidden (or overflow: auto / scroll) to the element. This is commonly needed for images inside rounded containers, for cards with overflowing content, or for containers with absolutely positioned children. Note that overflow: hidden creates a new stacking context and a new block formatting context, which can affect layout and z-index behavior.

Can border-radius be animated with CSS transitions?

Yes, border-radius animates smoothly with CSS transitions and keyframe animations because it is an animatable property. You can transition between different radius values for effects like a button morphing from rounded to square on hover. For the best performance, animate between numeric values (e.g., 4px to 20px). Avoid animating between percentage and pixel values in the same transition, as this can cause unexpected results. Border-radius animations are generally well-performing since they only affect the element's shape and don't trigger layout reflows of sibling elements.

What are common border-radius values used in modern design?

Common border-radius values in modern UI design include: 4px for subtle rounding on small elements like tags and badges, 8px for standard cards and inputs, 12px for medium-sized containers and dialog boxes, 16px for larger panels and feature cards, 9999px or 50% for pill-shaped buttons and fully circular avatars, and mixed values like 16px 4px for a subtle rounded rectangle with only slight rounding on some corners. Design systems like Material Design (4-28px), Apple HIG (varies by element), and Tailwind CSS (rounded-sm: 0.125rem, rounded-lg: 0.5rem, rounded-full: 9999px) provide standardized scales.

How do I make border-radius responsive?

There are several strategies for responsive border-radius. The simplest is using percentage values that scale with the element. For more control, use CSS custom properties that change at breakpoints: --radius: 8px on mobile and --radius: 16px on desktop. You can also use CSS clamp() for fluid values: border-radius: clamp(4px, 2vw, 16px). For design systems, define radius tokens at multiple breakpoints. Media queries remain the most explicit approach when you need different radius values at specific screen sizes. Always test your border-radius values at multiple viewport widths to ensure they look appropriate at every size.

Border Radius Generator

Design custom border radius with a visual editor and copy the CSS.

BeginnerCSS ToolsFreev1.0.0Updated Jul 22, 2025

Presets

Live preview

Link All Corners

Changing one corner updates all four

Top Left

Top Right

Bottom Right

Bottom Left

Preview Colors

Background

Border

Border Width

Corner Values Diagram

12pxTop Left

12pxTop Right

12pxBottom Right

12pxBottom Left

Generated CSS

Shorthand

border-radius: 12px;

Individual Properties

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

How to Use the Border Radius Generator

Choose a preset or start fresh — Select one of the 8 built-in presets (Rounded, Pill, Circle, Squircle, Blob, Leaf, Ticket, Sharp) for a quick start, or begin with the default 12px rounded corners.
Adjust corner values — Use the sliders and number inputs to fine-tune each corner from 0 to 150px. Toggle "Link All Corners" to adjust all four corners at once or edit them independently.
Customize the preview — Change the background color, border color, and border width to see how your border-radius looks with different visual styles.
Review the corner diagram — The visual diagram displays each corner value directly on the box shape for a clear overview of your radius configuration.
Copy the CSS — Choose between shorthand (single property) or individual properties (one per corner) and click the copy button to get production-ready CSS.

Features

Real-time visual preview with a large 256×256px box showing your border-radius instantly
Four independent corner sliders (0–150px) with synchronized number inputs for precise control
Link All Corners toggle to update all four corners simultaneously or edit each independently
Visual corner values diagram that displays each radius directly on the box shape
8 built-in presets: Rounded, Pill, Circle, Squircle, Blob, Leaf, Ticket, and Sharp
Customizable background color with a native color picker and hex input
Customizable border color and border width (0–20px) for realistic previewing
Syntax-highlighted CSS output in both shorthand and individual property formats
One-click copy buttons for both CSS formats with visual confirmation feedback
Smart shorthand detection — automatically reduces to the minimal syntax needed
Fully responsive design that works great on desktop and mobile devices
100% client-side — no data ever leaves your browser

Understanding Border Radius Properties

Shorthand Syntax

The border-radius shorthand accepts one to four values. One value applies equally to all corners. Two values set top-left/bottom-right and top-right/bottom-left. Three values set top-left, top-right/bottom-left, and bottom-right. Four values apply clockwise starting from top-left. This intelligent shorthand reduces code size while maintaining full control over each corner.

Individual Corner Properties

For maximum clarity and when you need to transition individual corners independently, use the four individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Each accepts one or two values (for elliptical radii). These are especially useful in animation keyframes and when you need to override a single corner from a shorthand.

Elliptical Radii

Each corner radius can accept two values separated by a forward slash (e.g., 20px / 10px). The first value is the horizontal radius and the second is the vertical radius. This creates elliptical rather than circular corners, enabling organic, non-uniform shapes. When using percentages, the horizontal radius is relative to the element's width and the vertical radius is relative to its height.

Percentage vs Pixel Values

Pixel values create fixed-radius corners that don't change with element size. Percentage values scale with the element's dimensions — 50% on a square creates a perfect circle, while on a rectangle it creates an ellipse. Percentages are ideal for responsive components where elements may resize. Pixels are better for design system tokens where you want consistent corner rounding regardless of element size.

Common Use Cases

Card Components

Round the corners of content cards, panels, and containers for a modern, approachable feel that softens the visual hierarchy.

Button Shapes

Create pill-shaped buttons with 9999px radius for primary actions, and subtly rounded buttons with 6-8px for secondary actions.

Avatar Images

Apply 50% border-radius to square images for perfectly circular profile pictures and user avatars.

Modal Dialogs

Use consistent corner rounding (12-16px) on modal dialogs and popovers for a polished, professional appearance.

Form Inputs

Add subtle 6-8px border-radius to text inputs, textareas, and select elements for a cohesive form design.

Notification Badges

Create pill-shaped notification indicators with full border-radius for a clean, compact badge design.

Creative Shapes

Combine different per-corner values to create organic shapes like blobs, leaves, and tickets for decorative elements.

Design System Tokens

Establish a consistent radius scale (e.g., sm: 4px, md: 8px, lg: 12px, xl: 16px, full: 9999px) for your entire design system.

Border Radius Design Tips

Use Color Converter to find the perfect background and border colors for your rounded elements by converting between HEX, RGB, and HSL formats.
Pair rounded corners with CSS gradients using Gradient Generator to create visually rich cards and containers with depth.
Add subtle box shadows to your rounded elements using Box Shadow Generator to enhance the sense of elevation and depth.
For responsive designs, use CSS Clamp Generator to create fluid border-radius values that scale smoothly across different screen sizes.
Consistency is key — define 3-5 radius tokens in your design system and stick to them to maintain a cohesive visual language.
Use 9999px (or a very large value) instead of 50% when you want guaranteed pill or circle shapes, since 50% can produce unexpected results on non-square elements.
Test your border-radius values with real content inside the element — text, images, and child elements can reveal clipping issues you might miss on an empty box.
Pair border-radius with overflow: hidden when you have child content (especially images) that should be clipped to the rounded shape.
Consider accessibility — very small border-radius values (0-2px) are nearly invisible and may not be worth the extra CSS complexity.
For dark themes, slightly increase your border-radius values (1-2px more) as the softer corners help reduce visual harshness against dark backgrounds.

Frequently Asked Questions

Related Tools

Box Shadow Generator

Design box shadows with a visual editor and copy the CSS.

BeginnerFree

Gradient Generator

Create beautiful CSS gradients with a visual editor.

IntermediateFree

Color Converter

Convert colors between HEX, RGB, HSL, and more formats.

BeginnerFree

CSS Clamp Generator

Generate responsive CSS clamp() values for fluid typography and sizing.

IntermediateFree

Faisal Hossain

Founder & Developer of FreeKit

I personally designed and built every tool on this website — including the one you just used. If these tools have been helpful, I can build custom tools, automation workflows, websites, and SEO solutions tailored to your business.

Services

SEO Audit, Technical SEO & On-Page SEO
WordPress & Shopify Development
WooCommerce & E-commerce Management
n8n & AI Workflow Automation
Python Automation & Web Scraping
VPS, Linux & Self-Hosted Infrastructure
AI Vibe Coding Expert — APPS, WEB, SAAS

Availability

Remote: Available Now

United States & European company

USD $25/hour or USD $1,500/month

On-site: Open to Relocation

With work visa & travel support

Email Me WhatsApp LinkedIn

View full profile & services

How to Use the Border Radius Generator

Choose a preset or start fresh — Select one of the 8 built-in presets (Rounded, Pill, Circle, Squircle, Blob, Leaf, Ticket, Sharp) for a quick start, or begin with the default 12px rounded corners.

Adjust corner values — Use the sliders and number inputs to fine-tune each corner from 0 to 150px. Toggle "Link All Corners" to adjust all four corners at once or edit them independently.

Customize the preview — Change the background color, border color, and border width to see how your border-radius looks with different visual styles.

Review the corner diagram — The visual diagram displays each corner value directly on the box shape for a clear overview of your radius configuration.

Copy the CSS — Choose between shorthand (single property) or individual properties (one per corner) and click the copy button to get production-ready CSS.

Features

Real-time visual preview with a large 256×256px box showing your border-radius instantly

Four independent corner sliders (0–150px) with synchronized number inputs for precise control

Link All Corners toggle to update all four corners simultaneously or edit each independently

Visual corner values diagram that displays each radius directly on the box shape

8 built-in presets: Rounded, Pill, Circle, Squircle, Blob, Leaf, Ticket, and Sharp

Customizable background color with a native color picker and hex input

Customizable border color and border width (0–20px) for realistic previewing

Syntax-highlighted CSS output in both shorthand and individual property formats

One-click copy buttons for both CSS formats with visual confirmation feedback

Smart shorthand detection — automatically reduces to the minimal syntax needed

Fully responsive design that works great on desktop and mobile devices

100% client-side — no data ever leaves your browser

Understanding Border Radius Properties

Shorthand Syntax

Individual Corner Properties

Elliptical Radii

Percentage vs Pixel Values

Common Use Cases

Card Components

Round the corners of content cards, panels, and containers for a modern, approachable feel that softens the visual hierarchy.

Button Shapes

Create pill-shaped buttons with 9999px radius for primary actions, and subtly rounded buttons with 6-8px for secondary actions.

Avatar Images

Apply 50% border-radius to square images for perfectly circular profile pictures and user avatars.

Modal Dialogs

Use consistent corner rounding (12-16px) on modal dialogs and popovers for a polished, professional appearance.

Form Inputs

Add subtle 6-8px border-radius to text inputs, textareas, and select elements for a cohesive form design.

Notification Badges

Create pill-shaped notification indicators with full border-radius for a clean, compact badge design.

Creative Shapes

Combine different per-corner values to create organic shapes like blobs, leaves, and tickets for decorative elements.

Design System Tokens

Establish a consistent radius scale (e.g., sm: 4px, md: 8px, lg: 12px, xl: 16px, full: 9999px) for your entire design system.

Border Radius Design Tips

Use Color Converter to find the perfect background and border colors for your rounded elements by converting between HEX, RGB, and HSL formats.

Pair rounded corners with CSS gradients using Gradient Generator to create visually rich cards and containers with depth.

Add subtle box shadows to your rounded elements using Box Shadow Generator to enhance the sense of elevation and depth.

For responsive designs, use CSS Clamp Generator to create fluid border-radius values that scale smoothly across different screen sizes.

Consistency is key — define 3-5 radius tokens in your design system and stick to them to maintain a cohesive visual language.

Use 9999px (or a very large value) instead of 50% when you want guaranteed pill or circle shapes, since 50% can produce unexpected results on non-square elements.

Test your border-radius values with real content inside the element — text, images, and child elements can reveal clipping issues you might miss on an empty box.

Pair border-radius with overflow: hidden when you have child content (especially images) that should be clipped to the rounded shape.

Consider accessibility — very small border-radius values (0-2px) are nearly invisible and may not be worth the extra CSS complexity.

For dark themes, slightly increase your border-radius values (1-2px more) as the softer corners help reduce visual harshness against dark backgrounds.

Frequently Asked Questions