rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Border-Radius Master Rounded Corners

Explore CSS border-radius for rounded corners.

Discover use cases, options like length, percentage, initial, and inherit.

Enhance your web designs with this versatile property.

Introduction

The CSS border-radius property is a fantastic tool for web developers and designers. It allows you to round the corners of an element’s outer border, making your designs look smooth and professional. You can control each corner individually or all at once, offering great flexibility.

Description

The CSS border-radius property helps you round the corners of an element’s border. You can create circular or elliptical corners by setting different radii. This property applies to the entire background of the element, even if there is no border.

Note:

Doesn’t work with table elements when border-collapse is set to collapse.
Shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Syntax

The border-radius property in CSS is used to round the corners of an element’s border. Here’s the basic structure:

border-radius: [1-4 length|%] / [1-4 length|%] | initial | inherit;

Parameters

[1-4 length|%]: Specify one to four values.
- One value: Applies to all corners.
- Two values: First value for top-left and bottom-right, second value for top-right and bottom-left.
- Three values: First for top-left, second for top-right and bottom-left, third for bottom-right.
- Four values: Apply to top-left, top-right, bottom-right, and bottom-left, respectively.
/: Optional slash to specify additional radii for elliptical corners.
initial: Resets to default value.
inherit: Inherits from the parent element.

Examples

Single Value:
```
border-radius: 10px;
```
Two Values:
```
border-radius: 10px 5%;
```
Three Values:
```
border-radius: 2px 4px 2px;
```
Four Values:
```
border-radius: 1px 0 3px 4px;
```
Elliptical Corners:
```
border-radius: 10px / 20px;
```

Values

The border-radius property allows various values for precise control:

Length

Description: Uses units like px, em, or rem.
Example:
```
border-radius: 10px;
```

Percentage (%)

Description: Relative to the element’s size.
Example:
```
border-radius: 50%;
```

Initial

Description: Resets to default value.
Example:
```
border-radius: initial;
```

Inherit

Description: Inherits from the parent element.
Example:
```
border-radius: inherit;
```

Shorthand Notations

You can use shorthand notations to specify different radii for each corner:

All Corners:
```
border-radius: value;
```
Two Values:
```
border-radius: value1 value2;
```
Three Values:
```
border-radius: value1 value2 value3;
```

Four Values:

border-radius: value1 value2 value3 value4;

Elliptical Corners

Specify elliptical corners using a slash (/):

Single Elliptical Value:
```
border-radius: 10px / 20px;
```
Two Elliptical Values:
```
border-radius: 10px 5% / 20px 30px;
```

Examples

Example 1: Rounded Corners for All Sides

<!DOCTYPE html>
<html>
<head>
    <title>Rounded Corners</title>
    <style>
        .box {
            border-radius: 35px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-radius: 35px;</p>
    </div>
</body>
</html>

Example 2: Rounded Corners with Two Values

<!DOCTYPE html>
<html>
<head>
    <title>Rounded Corners</title>
    <style>
        .box {
            border-radius: 20px 40px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-radius: 20px 40px;</p>
    </div>
</body>
</html>

Example 3: Rounded Top-Left Corner

<!DOCTYPE html>
<html>
<head>
    <title>Rounded Corners</title>
    <style>
        .box {
            border-top-left-radius: 35px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-top-left-radius: 35px;</p>
    </div>
</body>
</html>

Example 4: Elliptical Shape

<!DOCTYPE html>
<html>
<head>
    <title>Elliptical Shape</title>
    <style>
        .box {
            border-radius: 10px / 20px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-radius: 10px / 20px;</p>
    </div>
</body>
</html>

Example 5: Circular Shape

<!DOCTYPE html>
<html>
<head>
    <title>Circular Shape</title>
    <style>
        .box {
            border-radius: 50%;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-radius: 50%;</p>
    </div>
</body>
</html>

Example 6: Rounded Top Corners

<!DOCTYPE html>
<html>
<head>
    <title>Rounded Top Corners</title>
    <style>
        .box {
            border-radius: 10px 10px 0 0;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-radius: 10px 10px 0 0;</p>
    </div>
</body>
</html>

Example 7: Rounded Bottom Corners

<!DOCTYPE html>
<html>
<head>
    <title>Rounded Bottom Corners</title>
    <style>
        .box {
            border-radius: 0 0 10px 10px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Website</h2>
        <p>border-radius: 0 0 10px 10px;</p>
    </div>
</body>
</html>

Browser Compatibility

The border-radius property is widely supported across all major web browsers, making it an essential tool for modern web design and development. Here’s a breakdown of when support for border-radius was introduced in each browser:

Google Chrome: Supported since version 5.0 (May 2010)
Firefox: Supported since version 4.0 (March 2011)
Internet Explorer/Edge: Supported since version 9.0 (March 2011)
Opera: Supported since version 10.5 (June 2010)
Safari: Supported since version 5.0 (June 2010)

Related Properties

The border-radius property is part of a larger set of CSS properties that control the appearance and behavior of borders in web design. Understanding these related properties can help you achieve more precise and complex designs. Here are some of the key related properties:

1. `border-top-left-radius`

Description: This property specifically controls the radius of the top-left corner of an element.

Syntax:

border-top-left-radius: [length|%] [length|%];

Example:
```
border-top-left-radius: 10px 20px;
```

2. `border-top-right-radius`

Description: This property specifically controls the radius of the top-right corner of an element.

Syntax:

border-top-right-radius: [length|%] [length|%];

Example:
```
border-top-right-radius: 10px 20px;
```

3. `border-bottom-right-radius`

Description: This property specifically controls the radius of the bottom-right corner of an element.

Syntax:

border-bottom-right-radius: [length|%] [length|%];

Example:
```
border-bottom-right-radius: 10px 20px;
```

4. `border-bottom-left-radius`

Description: This property specifically controls the radius of the bottom-left corner of an element.

Syntax:

border-bottom-left-radius: [length|%] [length|%];

Example:
```
border-bottom-left-radius: 10px 20px;
```

5. `border-start-start-radius`

Description: This property controls the radius of the starting corner of the element based on the writing direction and text orientation.

Syntax:

border-start-start-radius: [length|%] [length|%];

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

6. `border-start-end-radius`

Description: This property controls the radius of the ending corner of the element based on the writing direction and text orientation.

Syntax:

border-start-end-radius: [length|%] [length|%];

Example:
```
border-start-end-radius: 10px 20px;
```

7. `border-end-start-radius`

Description: This property controls the radius of the starting corner of the element based on the opposite writing direction and text orientation.

Syntax:

border-end-start-radius: [length|%] [length|%];

Example:
```
border-end-start-radius: 10px 20px;
```

8. `border-end-end-radius`

Description: This property controls the radius of the ending corner of the element based on the opposite writing direction and text orientation.

Syntax:

border-end-end-radius: [length|%] [length|%];

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

9. `background-clip`

Description: This property determines whether the background extends into the border or not. It can affect the appearance of border-radius.

Syntax:

background-clip: border-box | padding-box | content-box;

Example:
```
background-clip: padding-box;
```

10. `border-collapse`

Description: This property is used to collapse the borders of table elements. It affects how the border-radius property is applied to table elements.
Syntax:
```
border-collapse: collapse | separate;
```
Example:
```
border-collapse: collapse;
```

By understanding and utilizing these related properties, you can gain more precise control over the appearance and behavior of borders in your web designs. This allows you to create more complex and visually appealing designs that enhance the user experience.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-background-repeat.png

CSS Background-Repeat A Comprehensive Guide Discover how to use CSS background-repeat for web design. Control image repetition with options like repeat, no-repeat, space, and round.

css_property_cover/css-property-border-image-repeat.png

CSS Border-Image-Repeat Customizing Border Images CSS border-image-repeat allows customization of border images. Use options like stretch, repeat, round, and space to create unique designs. Enhance visuals with ease.

css_property_cover/css-property-border-image-width.png

CSS Border-Image-Width Customize Border Image Size Learn how to use CSS border-image-width to customize the size of border images. Discover available options, including lengths, percentages, numbers, and the auto keyword.

css_property_cover/css-property-border-top-right-radius.png

CSS Border-Top-Right-Radius Round Corners Easily Learn how to use the CSS border-top-right-radius property to round the top-right corner of elements. Options include length and percentage values for circular or elliptical corners.

css_property_cover/css-property-border-image-outset.png

CSS border-image-outset Enhance Border Design The CSS border-image-outset property allows you to extend border images beyond an element's border box. Use it to create visually appealing designs with length, number, and global values.

css_property_cover/css-property-border-image-source.png

CSS border-image-source Mastering Custom Border Designs Learn about CSS border-image-source, a powerful tool for creating unique border designs using images or gradients. Explore its use cases, syntax, and compatibility.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS Border-Radius Master Rounded Corners

Introduction

Description

Note:

Syntax

Parameters

Examples

Values

Length

Percentage (%)

Initial

Inherit

Shorthand Notations

Elliptical Corners

Examples

Example 1: Rounded Corners for All Sides

Example 2: Rounded Corners with Two Values

Example 3: Rounded Top-Left Corner

Example 4: Elliptical Shape

Example 5: Circular Shape

Example 6: Rounded Top Corners

Example 7: Rounded Bottom Corners

Browser Compatibility

Related Properties

1. border-top-left-radius

2. border-top-right-radius

3. border-bottom-right-radius

4. border-bottom-left-radius

5. border-start-start-radius

6. border-start-end-radius

7. border-end-start-radius

8. border-end-end-radius

9. background-clip

10. border-collapse

Talk with CEO

1. `border-top-left-radius`

2. `border-top-right-radius`

3. `border-bottom-right-radius`

4. `border-bottom-left-radius`

5. `border-start-start-radius`

6. `border-start-end-radius`

7. `border-end-start-radius`

8. `border-end-end-radius`

9. `background-clip`

10. `border-collapse`