<pre class='metadata'>

Title: CSS Borders and Box Decorations Module Level 4

Shortname: css-borders

Level: 4

Status: WD

Prepare for TR: yes

Date: 2025-12-16

Work Status: Exploring

Group: csswg

ED: https://drafts.csswg.org/css-borders-4/

TR: https://www.w3.org/TR/css-borders-4/

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258

Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937

Editor: Noam Rosenthal, Google, w3cid 121539

Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343

Abstract: This module contains the features of CSS relating to the borders and decorations of boxes on the page.

Ignored Terms: border-*-*-radius, border-*-clip, box-shadow-*, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*

Ignored Vars: block, inline, Li, Ltop, Lbottom, Lleft, Lright, spread, total width, W, Wside, Wleft, Wright, Wtop, Wbottom

Repository: w3c/csswg-drafts

WPT Path Prefix: css/css-borders/

WPT Display: open

</pre>

<pre class="link-defaults">

spec:css-overflow-3; type:value; for:overflow; text:visible

spec:css-shapes-2;

type:function; text:path()

type:property; text:shape-inside

spec:css-text-4; type:value; text:collapse

spec:dom; type: dfn; text: element;

spec:geometry-1; type: dfn;

text: height dimension

text: width dimension

text: rectangle

text: x coordinate; for: rectangle

text: y coordinate; for: rectangle

spec:css-sizing-3; type:dfn;

text:height

text:size

text:width

</pre>

<h2 id="intro">

Introduction</h2>

The properties of this module deal with the decoration of the [=border area=].

It also defines decorations that can be applied to the box.

<h3 id="placement">

Module Interactions</h3>

This specification extends the parts related to borders and box decorations

of CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].

It provides specifications for the added 'corner-*-shape' and 'border-shape' properties, as well as

logical shorthands for 'border-*-radius', 'box-shadow-*' longhands,

and partial borders via the 'border-limit' and 'border-*-clip' properties.

All properties in this module apply to the ''::first-letter'' [=pseudo-element=].

The <a href="#corners">border-radius properties</a> also apply

to the ''::first-line'' [=pseudo-element=].

The UA may (but is not required to)

apply the 'border-image' or 'box-shadow' properties to ''::first-line''.

The UA must not

apply the <a href="#borders">border-color/style/width properties</a>

to ''::first-line''.

[[!CSS2]]

<h3 id="values">

Value Definitions</h3>

This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]

using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].

Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].

Combination with other CSS modules may expand the definitions of these value types.

For example, combining with <a href="https://www.w3.org/TR/css-images/">CSS Images</a>

allows for using CSS gradients as 'background-image' or 'border-image' values.

[[CSS-IMAGES-3]]

In addition to the property-specific values listed in their definitions,

all properties defined in this specification

also accept the <a>CSS-wide keywords</a> as their property value.

For readability they have not been repeated explicitly.

<h2 id="borders">

Borders</h2>

The [=border=] can either be a predefined style

(solid line, double line, dotted line, pseudo-3D border, etc.)

or it can be an image.

In the former case, various properties define

the style ('border-style'),

color ('border-color'),

and thickness ('border-width')

of the border.

<wpt title="Tests for features Not yet incorporated from Backgrounds 3">

border-image-gradient-zero-size-transform-crash.html

border-image-width-interpolation-math-functions.html

</wpt>

<h3 id="border-color" oldids="the-border-color">

Line Colors: the 'border-color' properties</h3>

<pre class="propdef">

Name: border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color

Value: <<color>> | <<image-1D>>

Initial: currentcolor

Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]

Inherited: no

Logical property group: border-color

Percentages: N/A

Computed Value: the computed color and/or a one-dimensional image function

Animation type: see prose

</pre>

These properties set the foreground <dfn noexport lt="border color" id="border-color-dfn">color</dfn>

of the [=border=] specified by the 'border-style' properties.

The stripes defined by <<image-1D>> follow the shape of the border

on the side to which they apply,

and are drawn in bands starting from the [=padding edge=] and progressing outwards.

The border width at each point

defines the |total width| of the stripes at that point.

<div class="example">

Using multiple colors for each side:

<pre class=lang-css>

.foo {

border: 30px solid;

border-color: stripes(<span class="swatch" tabIndex="0" style="--color: dodgerblue"></span>dodgerblue, <span class="swatch" tabIndex="0" style="--color: skyblue"></span>skyblue) stripes(<span class="swatch" tabIndex="0" style="--color: yellow"></span>yellow, <span class="swatch" tabIndex="0" style="--color: gold"></span>gold) stripes(<span class="swatch" tabIndex="0" style="--color: lightgreen"></span>lightgreen, <span class="swatch" tabIndex="0" style="--color: limegreen"></span>limegreen) stripes(<span class="swatch" tabIndex="0" style="--color: indianred"></span>indianred, <span class="swatch" tabIndex="0" style="--color: orange"></span>orange);

}

</pre>

Sample rendering:

<img src="images/multicolor-border.png" width="450" height="270"

alt="A box with a border that has four sides,

each side having two colors in stripes.

The top border is dodger blue and sky blue,

the right border is yellow and gold,

the bottom border is light green and lime green,

and the left border is indian red and orange."

>

The same border colors with ''border-style: dotted'':

<img src="images/multicolor-border-dotted.png" width="450" height="270"

alt="A box with a border that has four sides,

each side having two colors in stripes.

The top border is dodger blue and sky blue,

the right border is yellow and gold,

the bottom border is light green and lime green,

and the left border is indian red and orange.

The border style is dotted, so the colors appear in dots along the border."

>

</div>

<pre class="propdef shorthand">

Name: border-color

Value: [ <<color>> | <<image-1D>> ]{1,4}

</pre>

'border-color' is a [=shorthand property=] for the four physical 'border-*-color' properties.

The four values set the top, right, bottom and left border, respectively.

A missing left is the same as right,

a missing bottom is the same as top,

and a missing right is also the same as top.

This is resolved individually for each list item.

The [=flow-relative=] properties

'border-block-start-color',

'border-block-end-color',

'border-inline-start-color',

and 'border-inline-end-color'

correspond to the [=physical=] properties

'border-top-color',

'border-bottom-color',

'border-left-color',

and 'border-right-color'.

The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">

Name: border-block-color, border-inline-color

Value: <<'border-top-color'>>{1,2}

</pre>

These two <a>shorthand properties</a> set the

'border-block-start-color' &amp; 'border-block-end-color'

and

'border-inline-start-color' &amp; 'border-inline-end-color',

respectively.

The first value represents the <a>start</a> side color,

and the second value represents the <a>end</a> side color.

If only one value is given,

it applies to both the <a>start</a> and <a>end</a> sides.

<wpt pathprefix="/css/css-backgrounds/">

animations/border-color-interpolation.html

border-image-displayed-with-transparent-border-color.html

color-mix-currentcolor-border-repaint-parent.html

color-mix-currentcolor-border-repaint.html

currentcolor-border-repaint-parent.html

inheritance.sub.html

parsing/border-color-computed.html

parsing/border-color-invalid.html

parsing/border-color-shorthand.html

parsing/border-color-valid.html

</wpt>

<h3 id="border-style" oldids="the-border-style">

Line Patterns: the 'border-style' properties</h3>

<pre class="propdef">

Name: border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style

Value: <<line-style>>

Initial: none

Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]

Inherited: no

Logical property group: border-style

Percentages: N/A

Computed value: specified keyword

Animation type: discrete

</pre>

These properties control whether a [=border=] appears,

and if it does what <dfn noexport lt="border style" id="border-style-dfn">style</dfn> it's drawn in

(if it is not overridden by a <a href="#border-images">border image</a>).

The [=flow-relative=] properties

'border-block-start-style',

'border-block-end-style',

'border-inline-start-style',

and 'border-inline-end-style'

correspond to the [=physical=] properties

'border-top-style',

'border-bottom-style',

'border-left-style',

and 'border-right-style'.

The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">

Name: border-block-style, border-inline-style

Value: <<'border-top-style'>>{1,2}

</pre>

These two <a>shorthand properties</a> set the

'border-block-start-style' &amp; 'border-block-end-style'

and

'border-inline-start-style' &amp; 'border-inline-end-style',

respectively.

The first value represents the <a>start</a> side style,

and the second value represents the <a>end</a> side style.

If only one value is given,

it applies to both the <a>start</a> and <a>end</a> sides.

<pre class="propdef shorthand">

Name: border-style

Value: <<'border-top-style'>>{1,4}

</pre>

'border-style' is a [=shorthand property=] for the four physical 'border-*-style' properties.

The four values set the top, right, bottom and left border, respectively.

A missing left is the same as right,

a missing bottom is the same as top,

and a missing right is also the same as top.

This is resolved individually for each list item.

The style is specified as a <<line-style>> keyword, where

<pre class=prod><dfn><<line-style>></dfn> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>

Values have the following meanings:

<dl dfn-type=value dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border">

<dt><dfn>none</dfn>

<dd>

No border.

Color and width are ignored (i.e., the border has width 0).

Note this means that the initial value of 'border-image-width'

will also resolve to zero.

<dt><dfn>hidden</dfn>

<dd>

Same as ''border-style/none'',

but has different behavior in the border conflict resolution rules

for border-collapsed tables [[!CSS2]].

<dt><dfn>dotted</dfn>

<dd>

A series of round dots.

<dt><dfn>dashed</dfn>

<dd>

A series of square-ended dashes.

<dt><dfn>solid</dfn>

<dd>

A single line segment.

<dt><dfn>double</dfn>

<dd>

Two parallel solid lines with some space between them.

(The thickness of the lines is not specified,

but the sum of the lines and the space must equal 'border-width'.)

<dt><dfn>groove</dfn>

<dd>

Looks as if it were carved in the canvas.

(This is typically achieved by creating a “shadow” from two colors

that are slightly lighter and darker than the specified 'border-color'.)

<dt><dfn>ridge</dfn>

<dd>

Looks as if it were coming out of the canvas.

<dt><dfn>inset</dfn>

<dd>

Looks as if the content on the inside of the border

is sunken into the canvas.

Treated as ''border-style/ridge'' in the

<a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a>. [[!CSS2]]

<dt><dfn>outset</dfn>

<dd>

Looks as if the content on the inside of the border

is raised out of the canvas.

Treated as ''border-style/groove'' in the

<a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a>. [[!CSS2]]

</dl>

Borders are drawn in front of the element’s background,

but behind the element’s content (in case it overlaps).

<figure>

<img src="images/borderstyles.png" width="669" height="383"

alt=""

>

<figcaption>Example renderings of the predefined border styles.</figcaption>

</figure>

Note: Border colors close to black or white

may need different color calculations than colors in between

in order to create the required “3D” effect

of ''border-style/groove'', ''border-style/ridge'', ''border-style/inset'', or ''border-style/outset''.

Note: There is no control over

the spacing of the dots and dashes,

nor over the length of the dashes.

Implementations are encouraged to choose a spacing

that makes the corners symmetrical.

<wpt pathprefix="/css/css-backgrounds/">

inheritance.sub.html

parsing/border-style-computed.html

parsing/border-style-invalid.html

parsing/border-style-shorthand.html

parsing/border-style-valid.html

</wpt>

<h3 id="border-width" oldids="the-border-width">

Line Thickness: the 'border-width' properties</h3>

<pre class="propdef">

Name: border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width

Value: <<line-width>>

Initial: medium

Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]

Inherited: no

Logical property group: border-width

Percentages: N/A

Computed value: absolute length, [=snapped as a border width=]

Animation Type: by computed value

</pre>

These properties specify the thickness of the [=border=],

i.e. the <dfn export id="border-width-dfn">border width</dfn>.

Where

<pre class=prod><dfn><<line-width>></dfn> = <<length [0,∞]>> | hairline | thin | medium | thick</pre>

<p dfn-type=value dfn-for="<line-width>, border-width, border-top-width, border-left-width, border-bottom-width, border-right-width, border">

Negative values are invalid.

The <dfn>thin</dfn>, <dfn>medium</dfn>, and <dfn>thick</dfn> keywords

are equivalent to ''1px'', ''3px'', and ''5px'', respectively.

The <dfn>hairline</dfn> keyword is a UA-defined length,

less than or equal to ''1px''

and equal to an integer number of device pixels at the default page zoom,

which represents a "just visible" line.

(While it can be as large as ''1px'',

on many devices it will be approximately ''0.3px'' to ''0.5px''.)

The [=resolved value=] for the 'border-width' properties is the [=used value=].

If the 'border-style' corresponding to a given 'border-width' is ''border-style/none'' or ''border-style/hidden'',

then the [=used value|used=] width is 0.

The [=flow-relative=] properties

'border-block-start-width',

'border-block-end-width',

'border-inline-start-width',

and 'border-inline-end-width'

correspond to the [=physical=] properties

'border-top-width',

'border-bottom-width',

'border-left-width',

and 'border-right-width'.

The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">

Name: border-block-width, border-inline-width

Value: <<'border-top-width'>>{1,2}

</pre>

These two <a>shorthand properties</a> set the

'border-block-start-width' &amp; 'border-block-end-width'

and

'border-inline-start-width' &amp; 'border-inline-end-width',

respectively.

The first value represents the <a>start</a> side width,

and the second value represents the <a>end</a> side width.

If only one value is given,

it applies to both the <a>start</a> and <a>end</a> sides.

<pre class="propdef shorthand">

Name: border-width

Value: <<'border-top-width'>>{1,4}

</pre>

'border-width' is a [=shorthand property=] for the four physical 'border-*-width' properties.

The four values set the top, right, bottom and left border, respectively.

A missing left is the same as right,

a missing bottom is the same as top,

and a missing right is also the same as top.

This is resolved individually for each list item.

Note: Although the [=initial value|initial=] width is ''medium'',

the [=initial value|initial=] style is ''border-style/none'';

therefore the [=used value|used=] initial width is 0.

<wpt pathprefix="/css/css-backgrounds/">

animations/border-bottom-width-composition.html

animations/border-image-width-composition.html

animations/border-image-width-interpolation.html

animations/border-left-width-composition.html

animations/border-right-width-composition.html

animations/border-top-width-composition.html

animations/border-width-interpolation.html

border-bottom-width-medium.html

border-bottom-width-thick.html

border-bottom-width-thin.html

border-left-width-medium.html

border-left-width-thick.html

border-left-width-thin.html

border-right-width-medium.html

border-right-width-thick.html

border-right-width-thin.html

border-top-width-medium.html

border-top-width-thick.html

border-top-width-thin.html

border-width-cssom.html

border-width-pixel-snapping-001-a.html

border-width-pixel-snapping-001-b.html

border-width-small-values-001-a.html

border-width-small-values-001-b.html

border-width-small-values-001-c.html

border-width-small-values-001-d.html

border-width-small-values-001-e.html

inheritance.sub.html

parsing/border-width-computed.html

parsing/border-width-invalid.html

parsing/border-width-shorthand.html

parsing/border-width-valid.html

</wpt>

<wpt>

borders-on-sub-unit-sized-elements.html

subpixel-borders-with-child-border-box-sizing.html

subpixel-borders-with-child.html

</wpt>

<h3 id="border-shorthands" oldids="the-border-shorthands">

Border Shorthand Properties</h3>

<pre class="propdef shorthand">

Name: border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end

Value: <<line-width>> || <<line-style>> || <<color>>

Initial: See individual properties

Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]

Inherited: no

Percentages: N/A

Computed value: see individual properties

Animation Type: see individual properties

</pre>

These [=shorthand properties=] set

the 'border-width', 'border-color', and 'border-style'

of one side of the [=borders=] of a box.

Omitted values are set to their [=initial values=].

The [=flow-relative=] properties

'border-block-start',

'border-block-end',

'border-inline-start',

and 'border-inline-end'

correspond to the [=physical=] properties

'border-top',

'border-bottom',

'border-left',

and 'border-right'.

The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">

Name: border-block, border-inline

Value: <<'border-block-start'>>

</pre>

These two <a>shorthand properties</a> set the

'border-block-start' &amp; 'border-block-end'

or

'border-inline-start' &amp; 'border-inline-end',

respectively,

both to the same style.

<!-- intentionally cannot set two sides independently;

see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->

<pre class="propdef shorthand">

Name: border

Value: <<line-width>> || <<line-style>> || <<color>>

</pre>

<wpt pathprefix="/css/css-backgrounds/">

parsing/border-invalid.html

parsing/border-shorthand.html

parsing/border-valid.html

</wpt>

The 'border' property is a [=shorthand property=] for setting

the same 'border-width', 'border-color', and 'border-style'

for all four borders of a box.

Unlike the shorthand 'margin' and 'padding' properties,

the 'border' property cannot set different values on the four borders.

To do so, one or more of the other border properties must be used.

The 'border' shorthand also resets 'border-image' to its initial value.

It is therefore recommended that authors use the 'border' shorthand,

rather than other shorthands or the individual properties,

to override any border settings earlier in the cascade.

This will ensure that 'border-image' has also been reset

to allow the new styles to take effect.

Note: The CSS Working Group intends for the 'border' shorthand

to reset all border properties in future levels of CSS as well.

For example, if a <css>border-characters</css> property

is introduced in the future to allow glyphs as borders,

it will also be reset by the 'border' shorthand.

By using the 'border' shorthand to reset borders,

authors can be guaranteed a “blank canvas”

no matter what properties are introduced in the future.

<div class="example">

For example, the first rule below is equivalent to the set of five

rules shown after it:

<pre>

p { border: solid red }

p {

border-top: solid red;

border-right: solid red;

border-bottom: solid red;

border-left: solid red;

border-image: none;

}

</pre>

</div>

Since, to some extent, the properties have overlapping functionality,

the order in which the rules are specified is important.

<div class="example">

Consider this example:

<pre>

blockquote {

border-color: red;

border-left: double;

color: black

}

</pre>

In the above example,

the color of the left border is black, while the other borders are red.

This is due to 'border-left' setting the width, style, and color.

Since the color value is not given by the 'border-left' property,

it will be taken from the 'color' property.

The fact that the 'color' property is set after the 'border-left' property

is not relevant.

</div>

<h2 id="corners">

Corners</h2>

The [=padding edge=] (inner border) radius is

the outer border radius minus the corresponding border thickness.

In the case where this results in a negative value,

the inner radius is zero.

(In such cases the center of the border’s inner curve might not coincide

with that of its outer curve.)

Likewise the [=content edge=] radius is

the [=padding edge=] radius minus the corresponding [=padding=],

or if that is negative, zero.

The border and padding thicknesses in the curved region

are thus interpolated from the adjoining sides,

and when two adjoining borders are of different thicknesses

the corner will show a smooth transition

between the thicker and thinner borders.

All border styles (''border-style/solid'', ''border-style/dotted'', ''border-style/inset'', etc.)

follow the curve of the border.

<figure>

<img src="images/smooth-radius.png" width="407" height="176"

alt=""

>

<figcaption>

The effect of a rounded corner when the two borders it connects

are of unequal thickness (left)

and the effect of a rounded corner on borders

that are thicker than the radius of the corner (right).

</figcaption>

</figure>

Note: If the center of a corner's outer curve

is past an opposite [=padding edge=]

(in the [=border area=] of a side opposite the corner),

the inner curve will not be a full quarter ellipse.

<figure>

<table>

<tr>

<td>

<pre>

p { width: 70px; height: 70px; border: solid 30px;

border-color: orange orange silver silver;

border-top-right-radius: 100%; }

</pre>

<td>

<img src="images/partial-curve.png" width="141" height="142"

alt="The curved corner is an arc from the top left corner

sweeping across the top right corner to the bottom right corner,

describing a quarter-ellipse;

but since the opposite sides have a border thickness

the padding edge curve starts inward from the outer arc's endpoints."

>

</table>

<figcaption>

Where the border-radius curve extends into the opposite sides' borders,

the arc of the padding edge is less than 90&deg;.

</figcaption>

</figure>

The [=margin edge=], being outside the [=border edge=],

calculates its radius by <em>adding</em> the corresponding margin thickness

to each border radius, with the corresponding [=outset-adjusted border radius=] applied.

<div algorithm="border-radius-outset">

When expanding an [=edge=] that has a [=border radius=], e.g. for computing the [=margin edge=], 'box-shadow' spread, or 'overflow-clip-margin',

the different [=border radius=] values are adjusted so that a small rounded corner with a big outset does not appear to be disproportionally round.

This is done by computing the corresponding [=outset-adjusted border radius=].

To compute the <dfn export>outset-adjusted border radius</dfn> given the 2-dimensional [=size=]'s |edge|, |radius|, and |outset|:

1. Let |coverage| be <code>2 * min(|radius|'s [=width=] / |edge|'s [=width=], |radius|'s [=height=] / |edge|'s [=height=])</code>.

1. Let |adustedRadiusWidth| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=width=], and |outset|'s [=width=].

1. Let |adustedRadiusHeight| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=height=], and |outset|'s [=height=].

1. Return (|adustedRadiusWidth|, |adustedRadiusHeight|).

To compute the <dfn>adjusted radius dimension</dfn> given numbers |coverage|, |radius|, and |outset|:

1. If |radius| is greater than |spread|, or if |coverage| is greater than 1, then return <code>|radius| + |outset|</code>.

1. Let |ratio| be <code>|radius| / |outset|</code>.

1. Return <code>|radius| + |outset| * (1 - (1 - |ratio|)³ * (1 - |coverage|³))</code>.

Note: this algorithm is designed to reduce the effect of the |outset| (or spread) on the shape of the corner.

The |coverage| factor makes this reduction more pronounced for rectangular shapes (where the [=border radius=] is close to 0),

and less pronounced for elliptical shapes (where the [=border radius=] is close to 50%).

</div>

<h3 id="corner-clipping">

Corner Clipping</h3>

Although <a href="#border-image">border images</a>

are not affected by 'border-radius',

other effects that clip painting or event handling

to the [=border edge|border=], [=padding edge|padding=], or [=content edge|content=] edge

must clip to their respective curves.

For example,

backgrounds clip to the curve specified by 'background-clip',

'overflow' values other than ''visible'' to the curved [=padding edge=]

(when 'overflow' on both axes is not ''visible''),

[=replaced element=] content to the curved [=content edge=],

pointer events to the curved [=border edge=],

etc.

Note: As 'border-radius' reduces the interactive area of an element

authors should make sure the remaining interactive area conforms

to recommended minima for the platforms they target;

in particular, conforming to recommended minimum touch target sizes

may require larger widths and heights when 'border-radius' is used.

<div class=example>

This example adds appropriate padding,

so that the contents do not overflow the corners.

Note that there is no border,

but the background will still have rounded corners.

<pre>

DIV {

background: black;

color: white;

border-radius: 1em;

padding: 1em }

</pre>

</div>

<h3 id="corner-transitions">

Color and Style Transitions</h3>

Color and style transitions must be contained

within the segment of the border that intersects

the smallest rectangle that contains both border radii

as well as the center of the inner curve

(which may be a point representing the corner of the padding edge,

if the border radii are smaller than the [=border width=]).

If one of these borders is zero-width,

then the other border takes up the entire transitional area.

Otherwise,

the center of color and style transitions between adjoining borders

is a point along the curve that is a continuous monotonic function

of the ratio of the border widths.

However it is not defined what these transitions look like

or what function maps from this ratio to a point on the curve.

<figure>

<img src="images/transition-region.png" width="600" height="178"

alt=""

>

<figcaption>

Given these corner shapes, color and style transitions

must be contained within the green region.

In case D the rectangle defined by the border radii

does not include the center of the inner curve (which is a sharp corner),

so the transition region is expanded to include that corner.

Transitions may take up the entire transition region,

but are not required to:

For example, a gradient color transition between two solid border styles

might take up only the region bounded by

the tips of the outer radii and the tips of the inner radii

(represented in case D by the dark green region).

</figcaption>

</figure>

<wpt>

border-radius-currentcolor.html

</wpt>

<h3 id="corner-overlap">

Overlapping Curves</h3>

Corner curves must not overlap:

When the sum of any two adjacent border radii

exceeds the size of the border box,

UAs must proportionally reduce

the used values of all border radii

until none of them overlap.

The algorithm for reducing radii is as follows:

Let <var>f</var> = min(<var>L_i</var>/<var>S_i</var>),

where <var>i</var> ∈ {top, right, bottom, left},

<var>S_i</var> is the sum of the two corresponding radii

of the corners on side <var>i</var>,

and <var>L_top</var> = <var>L_bottom</var> = the width of the box,

and <var>L_left</var> = <var>L_right</var> = the height of the box.

If <var>f</var> &lt; 1, then all corner radii are reduced

by multiplying them by <var>f</var>.

Note: This formula ensures that quarter circles remain quarter circles

and large radii remain larger than smaller ones,

but it may reduce corners that were already small enough,

which may make borders of nearby elements that should look the same

look different.

If the curve interferes with UI elements such as scrollbars,

the UA may further reduce the used value of the affected border radii

(and only the affected border radii)

as much as necessary, but no more.

<div class=example>

For example, the borders A of the <a href="#reduced-radius">figure below</a>

might be the result of

<pre>

box-sizing: border-box;

width: 6em;

height: 2.5em;

border-radius: 0.5em 2em 0.5em 2em

</pre>

The height (2.5em) is enough for the specified radii (0.5em plus 2.0em).

However, if the height is only 2em,

<pre>

box-sizing: border-box;

width: 6em;

height: 2em;

border-radius: 0.5em 2em 0.5em 2em

</pre>

all corners need to be reduced by a factor 0.8 to make them fit.

The used border radii thus are

0.4em (instead of 0.5em) and 1.6em (instead of 2em).

See borders B in the figure.

<figure id=reduced-radius>

<img src="images/corner-large-mix.png" width="539" height="168"

alt="rectangle with two tiny rounded corners and two very large ones, on opposite corners"

>

<figcaption>

These rounded corner might be the result of

''width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em''

for A; and ditto but with ''height: 2em'' for B.

</figcaption>

</figure>

</div>

<h3 id="border-radius-tables">

Effect on Tables</h3>

The 'border-radius' properties do apply to

''display/table'', ''inline-table'', and ''table-cell'' boxes

in separated borders mode (''border-collapse: separate'').

When 'border-collapse' is ''border-collapse/collapse'', they have no effect.

<wpt pathprefix="/css/css-backgrounds/">

ttwf-reftest-borderRadius.html

</wpt>

<h3 id="border-radius" oldids="the-border-radius">

Corner Sizing: the 'border-*-*-radius' properties</h3>

<pre class="propdef">

Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

Value: <<border-radius>>

Initial: 0

Applies to: all elements (but see prose)

Inherited: no

Logical property group: border-radius

Percentages: Refer to corresponding dimension of the <a>border box</a>.

Computed value: pair of computed <<length-percentage>> values

Animation Type: by computed value

</pre>

The radius is specified as a <<border-radius>> value, where

<pre class="prod">

<dfn><<border-radius>></dfn> = <<slash-separated-border-radius-syntax>> | <<legacy-border-radius-syntax>>

<dfn><<slash-separated-border-radius-syntax>></dfn> = <<length-percentage [0,∞]>> [ / <<length-percentage [0,∞]>> ]?

<dfn><<legacy-border-radius-syntax>></dfn> = <<length-percentage [0,∞]>>{1,2}

</pre>

The two <<length-percentage>> values of the 'border-*-radius' properties

define the <dfn id="border-radii" lt="border radius">radii</dfn> of

a quarter ellipse that defines the shape of the corner

of the outer [=border edge=] (see the diagram below).

The first value is the horizontal radius,

the second the vertical radius.

If the second value is omitted it is copied from the first.

If either length is zero, the corner is square, not rounded.

Percentages for the horizontal radius refer to the width of the [=border box=],

whereas percentages for the vertical radius refer to the height of the [=border box=].

Negative values are invalid.

Note: Authors <em>should</em> use the slash syntax, which is preferred for new content,

but the legacy syntax (two values separated by whitespace)

is supported for backwards compatibility.

<figure>

<img src="images/corner.png" width="289" height="179"

alt="Diagram of the inscribed ellipse"

>

<figcaption>

The two values of ''border-top-left-radius: 55pt 25pt''

define the curvature of the corner.

</figcaption>

</figure>

<div class=example>

This example draws ovals of 15em wide and 10em high:

<pre>

DIV.standout {

width: 13em;

height: 8em;

border: solid black 1em;

border-radius: 7.5em 5em }

</pre>

</div>

The [=flow-relative=] properties

'border-start-start-radius',

'border-start-end-radius',

'border-end-start-radius',

and 'border-end-end-radius'

correspond to the [=physical=] properties

'border-top-left-radius',

'border-bottom-left-radius',

'border-top-right-radius',

and 'border-bottom-right-radius'.

The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation',

with the first start/end giving the block axis side,

and the second the inline-axis side

(i.e. patterned as 'border-<var>block</var>-<var>inline</var>-radius').

<h3 id="corner-sizing">

Corner Sizing Shorthands: the 'border-radius' and 'border-*-radius' shorthand properties</h3>

<h4 id="corner-sizing-side-shorthands">

Sizing The Corners Of One Side:

The 'border-top-radius', 'border-right-radius',

'border-bottom-radius', 'border-left-radius',

'border-block-start-radius', 'border-block-end-radius',

'border-inline-start-radius', 'border-inline-end-radius' shorthands</h4>

<pre class="propdef shorthand">

Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius,

border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius

Value: <<length-percentage [0,∞]>>{1,2} [ / <<length-percentage [0,∞]>>{1,2} ]?

Initial: 0

Applies to: all elements (but see prose)

Inherited: no

Percentages: Refer to corresponding dimension of the <a>border box</a>.

Computed value: see individual properties

Animation type: see individual properties

</pre>

<p>The 'border-*-radius' shorthands set the two 'border-*-*-radius'

longhand properties of the related side. If values are given before

and after the slash, then the values before the slash set the

horizontal radius and the values after the slash set the vertical radius.

If there is no slash, then the values set both radii equally.

The two values for the radii are given in the order

top-left, top-right for 'border-top-radius',

top-right, bottom-right for 'border-right-radius',

bottom-left, bottom-right for 'border-bottom-radius',

top-left, bottom-left for 'border-left-radius',

start-start, start-end for 'border-block-start-radius',

end-start, end-end for 'border-block-end-radius'

start-start, end-start for 'border-inline-start-radius',

and start-end, end-end for 'border-inline-end-radius'.

If the second value is omitted it is copied from the first.

<wpt>

border-radius-greater-than-width.html

tentative/border-radius-side-shorthands/border-radius-side-shorthands-001.html

tentative/border-radius-side-shorthands/border-radius-side-shorthands-002.html

tentative/parsing/border-block-end-radius-computed.html

tentative/parsing/border-block-end-radius-invalid.html

tentative/parsing/border-block-end-radius-valid.html

tentative/parsing/border-block-start-radius-computed.html

tentative/parsing/border-block-start-radius-invalid.html

tentative/parsing/border-block-start-radius-valid.html

tentative/parsing/border-bottom-radius-computed.html

tentative/parsing/border-bottom-radius-invalid.html

tentative/parsing/border-bottom-radius-valid.html

tentative/parsing/border-inline-end-radius-computed.html

tentative/parsing/border-inline-end-radius-invalid.html

tentative/parsing/border-inline-end-radius-valid.html

tentative/parsing/border-inline-start-radius-computed.html

tentative/parsing/border-inline-start-radius-invalid.html

tentative/parsing/border-inline-start-radius-valid.html

tentative/parsing/border-left-radius-computed.html

tentative/parsing/border-left-radius-invalid.html

tentative/parsing/border-left-radius-valid.html

tentative/parsing/border-right-radius-computed.html

tentative/parsing/border-right-radius-invalid.html

tentative/parsing/border-right-radius-valid.html

tentative/parsing/border-top-radius-computed.html

tentative/parsing/border-top-radius-invalid.html

tentative/parsing/border-top-radius-valid.html

</wpt>

<wpt pathprefix="/css/css-backgrounds/">

animations/border-bottom-left-radius-composition.html