CSS border-end-end-radius Attribute

Previous Page border-color
Next Page border-end-start-radius

Definition and usage

border-end-end-radius The property is used to define the corner radius between the end of the element's block direction (block-end) and the end of the inline direction (inline-end).

Note:Related CSS properties writing-mode,text-orientation and direction It defines the block direction and inline direction. That's why these properties also affect border-end-end-radius The result of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

If border-end-end-radius The property will be an ellipse if there are two values:

border-end-end-radius: 50px 100px;

If border-end-end-radius The value of the property will be a circle if there is one:

border-end-end-radius: 50px;

CSS border-end-end-radius properties are similar to border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius and border-top-right-radius The property is very similar, but border-end-end-radius The property depends on the block direction and the inline direction.

Instance

Example 1

Add rounded corners at the end of the block direction and the inline direction for some elements:

#example1 {
  background-color: lightblue;
  border-end-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 2: Combined with the direction Property

The position of the rounded corners at the end of the block direction and the inline direction is affected by direction The Impact of the Property:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-end-radius: 25px;
}

Try It Yourself

Example 3: Combined with the writing-mode Property

The position of the rounded corners at the end of the block direction and the inline direction is affected by writing-mode The Impact of the Property:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-end-radius: 25px;
}

Try It Yourself

CSS Syntax

border-end-end-radius: 0|length|initial|inherit;

Property Value

Value	Description
0	Default Value.
length	Defines the rounded corner shape at the end of the block direction and the inline direction.
%	This defines the rounded corner shape by the percentage of the length of the element on the corresponding axis.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	0
Inheritance:	No
Animation Creation:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.borderEndEndRadius="50px"