/    Sign up×
Reference /Pin to ProfileBookmark


sets the radius (or radiuses) based on which the top-right corner is rounded.


The border-top-right-radius defines the rounding of the top-right corner. If the value is set to 0 (the default value), the corner will be a square, if one value is used, the corner will be rounded based on a circle with that radius, while if two different values are used the corner will be rounded based on the ellipse that is defined by those two radiuses, with the first one being the horizontal and the second one being the vertical rounding.

/* Circle-based rounding */
border-top-right-radius: 3px;
border-top-right-radius: 1em;

/* Ellipse-based rounding */
border-top-right-radius: 15px 5px;
border-top-right-radius: 1em 2em;

/* Percentage-based rounding */
/* This sets the rounding to be based on the width/height of the element */
/* This can result in both elliptical and circular rounding, 
depending if the element is a rectangle or a square. */
border-top-right-radius: 5%;
border-top-right-radius: 6% 12%;

/* global css keywords */
border-top-right-radius: initial;
border-top-right-radius: inherit;
border-top-right-radius: revert;
border-top-right-radius: unset;


The length of the radius defined in an explicit length value.

The length of the radius based on a percentage of the element’s width/height.

Global CSS keyword – this sets the property to the default value.

Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty


Have a code example of border-top-right-radius? Submit a codepen.io demo and we'll showcase it here

to submit a demo.


Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 12.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,