CSS Border-Top-Right-Radius Round Corners Easily

border-top-right-radius

Description

The border-top-right-radius CSS property is used to round the top-right corner of an element. It defines the radius of the circle or ellipse that shapes the corner’s curvature. When set to zero, the corner remains square. The background of the element (image or color) will be clipped to the border, even if the corner is rounded.

This property is useful in web design for creating visually appealing designs. However, if you use the border-radius shorthand property afterward, the value of border-top-right-radius will be reset.

This property is standardized in the CSS Backgrounds and Borders Module Level 3, ensuring consistency across different browsers and platforms.

Syntax

The border-top-right-radius property can be used as follows:

/* Round the corner with a specific radius */
border-top-right-radius: 3px;

/* Create an elliptical corner with different horizontal and vertical radii */
border-top-right-radius: 0.5em 1em;

/* Inherit the value from the parent element */
border-top-right-radius: inherit;

/* Reset the value to its default */
border-top-right-radius: initial;

/* Revert the value to the user agent's default */
border-top-right-radius: unset;

/* Revert the value to the next level of specificity in the cascade */
border-top-right-radius: revert;

/* Revert the value to the next applicable level in the cascade */
border-top-right-radius: revert-layer;

Values

• <length>: Specifies the radius of the circle.
• <percentage>: Specifies the radius as a percentage of the element’s width or height.

With One Value

• A single value represents the radius of the circle.

With Two Values

• The first value is the horizontal radius of the ellipse.
• The second value is the vertical radius of the ellipse.

Examples

Here’s a simple example:

<div class="rounded-corner"></div>

.rounded-corner {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

In this example, the top-right corner of the div element will be rounded with a radius of 40 pixels.

Arc of a Circle

A single <length> value produces an arc of a circle.

<div class="circle-corner"></div>

.circle-corner {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Arc of an Ellipse

Two different <length> values produce an arc of an ellipse.

<div class="ellipse-corner"></div>

.ellipse-corner {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Square Element with Percentage Radius

A square element with a single <percentage> value produces an arc of a circle.

<div class="percentage-circle-corner"></div>

.percentage-circle-corner {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Non-Square Element with Percentage Radius

A non-square element with a single <percentage> value produces an arc of an ellipse.

<div class="percentage-ellipse-corner"></div>

.percentage-ellipse-corner {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Formal Definition

The border-top-right-radius property specifies the radius (or radii) of the ellipse that defines the curvature of the top-right corner.

Initial Value

• Initial Value: 0
  • By default, the top-right corner has no rounding and remains square.

Applies To

• Applies To: All elements. However, user agents are not required to apply this property to table and inline-table elements when border-collapse is set to collapse. The behavior on internal table elements is currently undefined. It also applies to the ::first-letter pseudo-element.

Inherited

• Inherited: No
  • The border-top-right-radius property is not inherited from the parent element by default.

Percentages

• Percentages: Refer to the corresponding dimension of the border box.
  • When using percentages, the horizontal axis refers to the width of the box, and the vertical axis refers to the height of the box.

Computed Value

• Computed Value: Two absolute <length> or <percentage> values.
  • The computed value will be in terms of absolute lengths or percentages, depending on the values provided.

Animation Type

• Animation Type: A length, percentage, or calc().
  • Values of the border-top-right-radius property can be interpolated as real, floating-point numbers during animations.

Formal Syntax

The formal syntax for border-top-right-radius is:

border-top-right-radius = <length-percentage [0,∞]>[{1,2}]

<length-percentage> = <length> | <percentage>

• <length-percentage>: This can be a <length> or a <percentage>.
  • <length>: Represents a fixed length, such as pixels (px), ems (em), or rems (rem).
  • <percentage>: Represents a percentage of the element’s width or height.
• [{1,2}]: Indicates that you can specify one or two values.
  • If one value is provided, it represents the radius of a circle.
  • If two values are provided, the first value represents the horizontal radius of an ellipse, and the second value represents the vertical radius.

Browser Compatibility

The border-top-right-radius property is widely supported across modern web browsers. Here’s a quick overview of browser compatibility:

Desktop Browsers

• Chrome: Supported since version 5.0.
• Firefox: Supported since version 4.0.
• Internet Explorer / Edge: Supported since version 9.0.
• Opera: Supported since version 10.5.
• Safari: Supported since version 5.0.

Mobile Browsers

• Android Browser: Supported since version 2.1.
• Chrome for Android: Full support.
• Firefox for Android: Full support.
• iOS Safari: Supported since iOS 3.2.
• Opera Mobile: Supported since version 10.1.
• Samsung Internet: Full support.

Compatibility Notes

• Internet Explorer: Versions earlier than 9.0 do not support the border-top-right-radius property.
• Opera Mini: Full support is available, but performance may vary depending on the device and network conditions.
• UC Browser for Android: Full support is available, but performance may vary depending on the device and network conditions.

Testing and Fallbacks

To ensure that your designs look good across all browsers, it’s a good practice to test your web pages on multiple browsers and devices. If you need to support older browsers that do not support the border-top-right-radius property, you can use CSS fallbacks or JavaScript polyfills to achieve similar visual effects.

Example of a Fallback

.rounded-corner {
  border-top-right-radius: 40px;
  /* Fallback for older browsers */
  -webkit-border-top-right-radius: 40px;
  -moz-border-radius-topright: 40px;
}

Related Properties

When working with border-top-right-radius, you might also find it useful to explore other related CSS properties that can help you achieve more advanced and sophisticated designs. Here are some related properties:

border-radius

The border-radius property is a shorthand property that allows you to set the radius for all four corners of an element simultaneously.

border-radius: 10px;

border-top-left-radius

The border-top-left-radius property is used to round the top-left corner of an element.

border-top-left-radius: 15px;

border-bottom-right-radius

The border-bottom-right-radius property is used to round the bottom-right corner of an element.

border-bottom-right-radius: 20px;

border-bottom-left-radius

The border-bottom-left-radius property is used to round the bottom-left corner of an element.

border-bottom-left-radius: 25px;

background-clip

The background-clip property defines how the background of an element is clipped at the border, including rounded corners.

background-clip: border-box;

border-style

The border-style property defines the style of the border, such as solid, dashed, or dotted.

border-style: solid;

border-width

The border-width property defines the width of the border.

border-width: 2px;

border-color

The border-color property defines the color of the border.

border-color: #000;

Example of Combining Related Properties

Here’s an example of how you can combine border-top-right-radius with other related properties to create a visually appealing element:

<div class="styled-element"></div>

.styled-element {
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: lightblue;
  border: 2px solid #000;
  width: 200px;
  height: 100px;
  background-clip: border-box;
}

In this example, the div element has rounded corners on all four sides, with a border that is 2 pixels wide and solid. The background color is light blue, and the background is clipped to the border box, ensuring that it is correctly displayed within the rounded corners.

Usage Guidelines

Using the border-top-right-radius property effectively can significantly enhance the look and feel of your web designs. Here are some guidelines to help you make the most of this property:

1. Understand the Context

• Circular vs. Elliptical Corners: Decide whether you want a circular or elliptical corner. A circular corner requires a single value, while an elliptical corner requires two values (horizontal and vertical radii).
• Responsive Design: Use percentage values to ensure the corners scale appropriately with the element’s size, making your design more responsive.

2. Consistent Styling

• Uniform Rounding: For a uniform look, consider using the same radius for all corners. You can achieve this with the border-radius shorthand property.
• Selective Rounding: If you want to round specific corners, use individual properties like border-top-right-radius, border-top-left-radius, etc.

3. Browser Compatibility

• Fallbacks: Ensure your design degrades gracefully on older browsers by providing fallbacks. For example, use vendor-prefixed properties for older versions of browsers.
• Testing: Always test your design on multiple browsers and devices to ensure consistent appearance.

4. Performance Considerations

• Optimization: While border-top-right-radius is generally performant, avoid overusing it in complex layouts where performance might be an issue.
• Simplicity: Keep your CSS simple and avoid unnecessary complexity to maintain good performance.

5. Accessibility

• Focus Styles: Ensure that rounded corners do not interfere with focus outlines or other accessibility features.
• Contrast: Maintain good contrast between the element and its background to ensure readability.

6. Design Best Practices

• Subtle Effects: Use subtle rounding for a more professional and polished look. Excessive rounding can make elements look cartoonish.
• Consistency: Maintain consistency in the use of rounded corners across your design to create a cohesive visual style.

7. Advanced Techniques

• Combining Properties: Combine border-top-right-radius with other properties like background-clip, border-style, and border-width to create more complex and visually appealing designs.
• Animations: Use CSS animations to transition between different border radii for interactive effects.

Example:

<div class="styled-element"></div>

.styled-element {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: lightblue;
  border: 2px solid #000;
  width: 200px;
  height: 100px;
  background-clip: border-box;
}

By understanding and utilizing the border-top-right-radius property effectively, you can enhance the visual appeal and responsiveness of your web projects, ensuring a consistent and professional look across different platforms and devices.

Resources

Here are some helpful resources to enhance your understanding and application of the border-top-right-radius property in CSS:

CSS Tutorials and Guides

• MDN Web Docs: The Mozilla Developer Network provides detailed documentation on CSS properties, including border-top-right-radius. MDN Web Docs on border-top-right-radius
• CSS-Tricks: This site offers a wide range of tutorials, tips, and tricks for CSS, including articles on border-radius properties. CSS-Tricks on border-radius

Online Courses and Learning Platforms

• Codecademy: Offers interactive courses on CSS, including lessons on border-radius and other border properties. Codecademy CSS Course
• Udemy: Provides a variety of paid courses on CSS, from beginner to advanced levels. Udemy CSS Courses

Documentation and Specifications

• W3C CSS Backgrounds and Borders Module Level 3: The official specification for CSS background and border properties, including detailed information on the border-radius properties. W3C CSS Backgrounds and Borders Module

Browser Compatibility and Testing

• Can I Use: A website that provides up-to-date browser support tables for CSS properties. Can I Use border-top-right-radius
• BrowserStack: A cross-browser testing tool that allows you to test your web designs on various browsers and devices to ensure compatibility. BrowserStack

Community and Forums

• Stack Overflow: A community-driven Q&A platform where you can ask questions, share knowledge, and find solutions to CSS-related issues. Stack Overflow CSS Questions
• Reddit r/web_design: A subreddit dedicated to web design, where you can discuss CSS properties, share your work, and get feedback from the community. Reddit r/web_design

Tools and Generators

• CSS Border Radius Generator: An online tool that allows you to visually generate and preview border-radius values for your CSS. CSS Border Radius Generator

By using these resources, you can learn more about the border-top-right-radius property and improve your CSS skills. These resources offer valuable insights, practical examples, and community support to help you create more effective and visually appealing web designs.