totn CSS

CSS: border-top-right-radius property

This CSS tutorial explains how to use the CSS property called border-top-right-radius with syntax and examples.

Description

The CSS border-top-right-radius property defines rounded corners on the right side of the top border of a box.

Syntax

The syntax for the border-top-right-radius CSS property is:

border-top-right-radius: value;

Parameters or Arguments

value

The radius value to apply to the right side of the top border of a box. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { border-top-right-radius: 2px; }
percentage Percentage value
div { border-top-right-radius: 10%; }
inherit Element will inherit the border-top-right-radius from its parent element
div { border-top-right-radius: inherit; }

Note

Browser Compatibility

The CSS border-top-right-radius property has basic support with the following browsers:

  • Chrome 4
  • Firefox 4+ (Gecko 2+)
  • Internet Explorer 9+ (IE 9+)
  • Opera 10.5+
  • Safari 5+ (WebKit 3+)

Example

We will discuss the border-top-right-radius property below, exploring examples of how to use this property in CSS.

Let's look at a CSS border-top-right-radius example where we provide a pixel value.

div { border-top-right-radius: 5px; border-top-style: solid; }

In this CSS border-top-right-radius example, we have defined rounded corners of 5px on the right side of the top border for the <div> tag. Be sure to apply a border-top-style so that the border appears.

Next, we'll look at a CSS border-top-right-radius example where we provide an em value.

div { border-top-right-radius: 1.5em; border-top-style: solid; }

In this CSS border-top-right-radius example, we have defined rounded corners of 1.5em to the right side of the top border.