BorderRadius

Border Radius Creator

CSS border radius generator • Live preview

Border Radius Syntax:

Show the generator

Basic Syntax:

  • border-radius: top-left top-right bottom-right bottom-left;
  • Single Value: border-radius: 10px; → All corners
  • Two Values: border-radius: 10px 20px; → (tl/br) (tr/bl)
  • Three Values: border-radius: 10px 20px 30px; → tl (tr/bl) br
  • Four Values: border-radius: 10px 20px 30px 40px; → tl tr br bl

Ellipse Syntax:

  • border-radius: horizontal / vertical;
  • Example: border-radius: 20px / 10px; → Elliptical corners

Border-radius creates smooth, rounded corners that enhance visual appeal and user experience.

Corner Controls

Uniform Radius

0px 10px 100px

Corner Style

Top Left
Top Right
Bottom Right
Bottom Left

Dimension Controls

Advanced Options

Preset Shapes

Square
Rounded
Circle
Egg
Teardrop
Diamond

Preview

CSS Output

/* Your CSS will appear here */

Comprehensive Border Radius Guide

What is CSS Border Radius?

CSS border-radius is a property that allows you to round the corners of elements. It's widely used for creating modern, soft UI elements, buttons, cards, and other design components. Unlike images, border-radius is vector-based and scales perfectly to any resolution.

Border Radius Components

Border-radius can control:

Individual corners → Separate control of each corner
Elliptical corners → Different horizontal/vertical radii
Uniform rounding → Same radius on all corners
Asymmetric shapes → Creative corner combinations

These controls work together to create various rounded effects.

Border Radius Applications
1
Buttons: Soft, approachable button designs
2
Cards: Modern card component styling
3
Avatars: Circular profile pictures
4
Icons: Rounded icon containers
Border Radius Benefits

Border-radius offers several advantages:

  • File Size: Zero bytes (generated by browser)
  • Scalability: Perfect quality at any resolution
  • Performance: Hardware-accelerated rendering
  • Customization: Easy modification via CSS
Border Radius Best Practices
  • Consistency: Use uniform values throughout
  • Usability: Maintain tap targets for mobile
  • Accessibility: Ensure sufficient contrast
  • Performance: Avoid extreme values

Border Radius Fundamentals

Radius Components

Values define corner rounding behavior.

Basic Syntax

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

Example: border-radius: 10px 20px 10px 20px;

Key Rules:
  • Single value applies to all corners
  • Max value is 50% of element dimension
  • Can use px, %, em, rem units
  • Supports elliptical values (h/v)

Development Tips

Elliptical Radius

Horizontal/vertical radius for oval corners.

Common Patterns
  1. Circular: border-radius: 50%
  2. Pill: border-radius: 50px
  3. Subtle: border-radius: 4-8px
  4. Asymmetric: different values per corner
Considerations:
  • Consider mobile tap target sizes
  • Ensure content remains accessible
  • Test with different element sizes
  • Use consistent values in design system

Border Radius Learning Quiz

Question 1: Multiple Choice - Border Radius Syntax

What does the CSS property border-radius: 10px 20px 30px 40px; do?

Solution:

The answer is B) Sets TL=10px, TR=20px, BR=30px, BL=40px. When four values are provided to border-radius, they follow the clockwise order: top-left, top-right, bottom-right, bottom-left. This gives complete control over each corner's radius.

Pedagogical Explanation:

Understanding the order of values in border-radius is crucial for precise corner control. The clockwise order (top-left, top-right, bottom-right, bottom-left) is consistent with other CSS properties like margin and padding. This systematic approach makes it easier to remember and apply the property correctly.

Key Definitions:

TL: Top-left corner

TR: Top-right corner

BR: Bottom-right corner

BL: Bottom-left corner

Important Rules:

• Four values: TL TR BR BL

• Clockwise order applies

• Values can be different per corner

Tips & Tricks:

• Remember: Clockwise direction

• Use 0 for square corners

• Combine with transitions for animations

Common Mistakes:

• Confusing the order of values

• Assuming values repeat in pairs

• Not understanding clockwise direction

Question 2: Border Radius Application

How would you create a perfect circle using border-radius? Provide an example and explain why it works.

Solution:

To create a perfect circle, use border-radius: 50%;

Example: 

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
This works because 50% of the width/height creates a radius that extends to the center of the element, forming a perfect circle. The element must have equal width and height for a perfect circle.

Pedagogical Explanation:

The 50% value works because it represents half the element's dimension. When the radius equals half the width and half the height, the curved corners meet at the center, creating a circular shape. This principle applies to any square element, making it a reliable method for creating circles.

Key Definitions:

50% Radius: Half the element dimension

Square Element: Equal width and height

Circular Shape: Perfectly round form

Important Rules:

• Element must be square for perfect circle

• 50% creates circular shape

• Works with any size square

Tips & Tricks:

• Use 50% for circular elements

• Ensure equal width/height

• Works for avatars and badges

Common Mistakes:

• Applying to non-square elements

• Using fixed pixel values instead of %

• Not ensuring equal dimensions

Question 3: Word Problem - Design Solution

You need to create a pill-shaped button that adapts to different text lengths. How would you implement this using border-radius to ensure the ends remain rounded regardless of the button's width?

Solution:

Use a large border-radius value that exceeds the button's height:

.pill-button {
  padding: 10px 20px;
  border-radius: 50px;
  /* Or use height-based value */
  border-radius: calc(height / 2);
}

Alternatively, use a percentage value based on the element's height: border-radius: 999px; which ensures the corners are always rounded regardless of the button's dimensions.

Pedagogical Explanation:

This approach works because when the border-radius value is large enough (greater than half the element's height), the corners curve to meet in the middle, creating a pill shape. Using a very large value like 999px or 50px ensures this effect regardless of the actual dimensions.

Key Definitions:

Pill Shape: Rectangle with fully rounded ends

Adaptive Design: Responds to content changes

Large Radius: Exceeds element dimensions

Important Rules:

• Radius > height/2 creates pill shape

• Use large values for adaptive pills

• Consider using calc() for dynamic values

Tips & Tricks:

• Use 999px for guaranteed pill effect

• Combine with padding for spacing

• Test with different content lengths

Common Mistakes:

• Using small radius values that don't create pill shape

• Not considering variable content width

• Forgetting to adjust for element height

Question 4: Application-Based Problem - Responsive Design

A border-radius that looks perfect on desktop appears too subtle on mobile devices. How would you adjust the radius to be responsive across different screen sizes?

Solution:

Use media queries to adjust border-radius based on screen size:

.element {
  border-radius: 12px;
}

@media (max-width: 768px) {
  .element {
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .element {
    border-radius: 20px;
  }
}

Alternatively, use relative units like rem or em for scalable corners.

Pedagogical Explanation:

This demonstrates the importance of responsive design for visual elements. Border-radius values that look appropriate on large screens might appear too subtle on smaller mobile screens. Using media queries or relative units ensures consistent visual appearance across all devices.

Key Definitions:

Responsive Design: Adapting to different screens

Media Queries: CSS rules for different conditions

Relative Units: Scale with context

Important Rules:

• Consider mobile viewing distances

• Use relative units for scalability

• Test across different devices

Tips & Tricks:

• Use em or rem for scalable corners

• Test radius values on actual devices

• Consider accessibility implications

Common Mistakes:

• Using same values across all screen sizes

• Not considering mobile usability

• Ignoring accessibility for touch targets

Question 5: Multiple Choice - Elliptical Radius

What does the CSS property border-radius: 20px / 10px; do?

Solution:

The answer is C) Sets horizontal radius to 20px, vertical to 10px. The slash (/) in border-radius separates horizontal and vertical radius values. This creates elliptical corners where the horizontal and vertical curves can be different, allowing for more complex and creative shapes.

Pedagogical Explanation:

The slash notation in border-radius allows for elliptical corners, which is particularly useful for creating ovals, eggs, teardrops, and other organic shapes. The first value (before the slash) controls the horizontal radius, and the second value (after the slash) controls the vertical radius for each corner.

Key Definitions:

Elliptical Radius: Different horizontal/vertical curves

Slash Notation: Separates h/v values

Horizontal Radius: Curve along x-axis

Vertical Radius: Curve along y-axis

Important Rules:

• Slash separates horizontal/vertical values

• First value = horizontal radius

• Second value = vertical radius

Tips & Tricks:

• Use for organic, non-circular shapes

• Creates oval/elliptical corners

• Combine with other border-radius values

Common Mistakes:

• Confusing slash notation with other syntax

• Not understanding horizontal vs vertical

• Forgetting the order of values

border-radius-creator

FAQ

Q: What's the difference between border-radius and clip-path?

A: border-radius rounds the corners of an element's border and content, while clip-path can create any arbitrary shape by clipping parts of the element.

Border-radius: border-radius: 20px; → Rounds corners with circular arcs
Clip-path: clip-path: polygon(50% 0%, 0% 100%, 100% 100%); → Creates triangle shape

Use border-radius for simple rounded corners and clip-path for complex geometric shapes.

Q: How do I create different radii for horizontal and vertical corners?

A: Use the slash notation to specify horizontal and vertical radii separately:

border-radius: 20px / 10px; → 20px horizontal, 10px vertical
border-radius: 10px 20px / 5px 15px; → TL/TR BR/BL for both h/v

This creates elliptical corners where the horizontal and vertical curves differ, useful for creating ovals and other non-circular shapes.

About

CSS Team
This calculator was created
This calculator was created by our Web & Development Team , may make errors. Consider checking important information. Updated: April 2026.