CSS border-end-end-radius Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-end-end-radius property is a CSS logical longhand that controls the curvature of a single corner of an element’s border box - specifically the corner formed by the “end” side of the inline axis and the “end” side of the block axis. In practice it determines how rounded that corner is when the element is drawn: it affects the shape of the element’s border, the clipping region used for backgrounds, and how content is clipped when overflow is constrained. Because it’s a logical property, it targets a conceptual corner rather than a fixed physical corner such as “top-right,” making it useful for internationalized layouts.

Which physical corner the border-end-end-radius value maps to depends on the element’s writing orientation and text direction. Those mappings follow the document’s layout flow as determined by writing-mode and the inline direction set by direction. For example, in a typical horizontal writing mode with left-to-right text the logical “end” inline side corresponds to the right edge and the logical “end” block side corresponds to the bottom edge, so the property affects the bottom-right corner; in right-to-left contexts that inline “end” would be the left edge instead. Because the mapping is dynamic, using logical properties like this makes style rules resilient to changes in writing mode and direction without needing different physical properties for each locale.

In layout and rendering the border-end-end-radius property interacts with shorthands and other corner-specific properties. When used alongside the shorthand border-radius or the other logical corner properties such as border-start-start-radius, the normal CSS cascade and specificity rules determine the resulting corner radii; the logical and physical corner properties ultimately map to the same computed corner geometry. If radii for adjacent corners would exceed the box dimensions, the browser scales radii proportionally so corners don’t overlap, and the rounded shape is respected when painting backgrounds and clipping content - which matters when combined with scrolling or clipping behavior controlled by overflow.

Definition

Initial value: 0
Applies to: all elements
Inherited: no
Computed value: two absolute lengths or percentages
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.borderEndEndRadius

Interactive Demo

border-end-end-radius: 40px 40px;

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

border-end-end-radius: 30%;
writing-mode: vertical-lr;

border-end-end-radius: 30%;
writing-mode: vertical-rl;

Example of the Border
End End Radius Property

Syntax

border-end-end-radius: <length-percentage>

Values

<length-percentage>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type.

Example

HTML

<div class="wrapper">

  <h2>border-end-end-radius demo</h2>

  <div class="row">

    <div class="card ltr">

      <div class="title">LTR  -  bottom end corner</div>

      <div class="box">border-end-end-radius: 28px;</div>

    </div>

    <div class="card rtl">

      <div class="title">RTL  -  bottom end corner</div>

      <div class="box">border-end-end-radius: 28px;</div>

    </div>

  </div>

</div>

CSS

:root {
  --size: 200px;
  --radius: 28px;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 24px;
  background: #f6f7fb;
  color: #0f172a;
}

.wrapper {
  max-width: 720px;
  margin: 0 auto;
}

h2 {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 18px;
  color: #111827;
}

.row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.card {
  width: var(--size);
  text-align: center;
}

.title {
  font-size: 14px;
  margin-bottom: 10px;
  color: #374151;
}

.box {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #0f172a;
  background: linear-gradient(135deg, #fff, #eef2ff);
  box-sizing: border-box;
  padding: 12px;
  color: #0f172a;
}

/* LTR example: inline-end is right, block-end is bottom -> end-end = bottom-right */
.ltr {
  direction: ltr;
  writing-mode: horizontal-tb;
}

.ltr .box {
  border-radius: 0;
  border-end-end-radius: var(--radius);
}

/* RTL example: inline-end is left, block-end is bottom -> end-end = bottom-left */
.rtl {
  direction: rtl;
  writing-mode: horizontal-tb;
}

.rtl .box {
  border-radius: 0;
  border-end-end-radius: var(--radius);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-end-end-radius property. Hover over a browser icon to see the version that first introduced support for this CSS property.