CSS anchor-size() Function

CSS anchor-size() Function

The CSS anchor-size() function calculates a length based on the dimensions of an anchor element. It allows absolutely or fixed-positioned elements to use an anchor's width or height when setting their own size, position, or margins. This is useful for dropdown menus, popovers, tooltips, and other interface elements that need to match or respond to the size of another element.

Syntax

anchor-size([<anchor-name> || <anchor-size>]?, <fallback>?)

The anchor-size() function accepts an optional anchor name, an optional dimension keyword, and an optional fallback length or percentage.

For example:

.dropdown {
  position: absolute;
  width: anchor-size(--button width);
}

This sets the dropdown's width equal to the width of the named anchor --button, provided the anchor is eligible for the positioned element.

The function can also use an element's default anchor:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: anchor-size(width);
}

When both the anchor name and dimension are omitted, the dimension defaults to the axis of the property:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: anchor-size();
}

In this example, anchor-size() uses the anchor's width.

The function returns a length, which can also be used in supported inset and margin properties.

Parameters

The anchor-size() function accepts the following components.

Examples include:

anchor-size()
anchor-size(width)
anchor-size(height)
anchor-size(--button width)
anchor-size(--button height)
anchor-size(--button inline)
anchor-size(--button self-block)
anchor-size(--button width, 150px)
anchor-size(--button height, 50%)

The anchor name and dimension can appear in either order when both are supplied.

The fallback value follows a comma.

Unlike anchor(), the dimension keyword is optional.

How It Works

The anchor-size() function uses an eligible anchor element's dimensions to calculate a length for another element.

The basic process involves three steps:

1. Assign an anchor name to the reference element using anchor-name.
2. Set the dependent element to position: absolute or position: fixed and associate it with the anchor using position-anchor.
3. Use anchor-size() in a supported sizing, inset, or margin property.

For example:

.button {
  anchor-name: --button;
  width: 180px;
}
.dropdown {
  position: absolute;
  position-anchor: --button;
  width: anchor-size(width);
}

The dropdown receives a width of 180px, matching the anchor's width.

If the button's width changes, the browser recalculates the dropdown's width.

The function does not change the anchor's dimensions. It only uses those dimensions as a reference.

Dimension Values

The <anchor-size> parameter determines which dimension is measured.

The logical keywords select a physical dimension based on the relevant writing mode. They do not return the size of the containing block itself.

For example:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: anchor-size(width);
  min-height: anchor-size(height);
}

The dropdown uses the anchor's width for its own width and the anchor's height for its minimum height.

It is also possible to use one axis to size a different axis:

.square {
  position: absolute;
  position-anchor: --button;
  height: anchor-size(width);
}

This makes the element's height equal to the anchor's width.

Named Anchors

Use the anchor-name property to assign a name to an anchor element.

For example:

.trigger {
  anchor-name: --trigger;
  width: 200px;
}
.popup {
  position: absolute;
  position-anchor: --trigger;
  width: anchor-size(width);
}

The popup uses the trigger's width as its own width.

A named anchor can also be referenced directly inside the function:

.popup {
  position: absolute;
  width: anchor-size(--trigger width);
}

However, specifying an anchor name inside anchor-size() does not by itself establish an anchor association. For reliable positioning, associate the positioned element with its anchor using position-anchor or another supported association mechanism.

The position-anchor property establishes the default anchor, allowing shorter function calls:

.popup {
  position: absolute;
  position-anchor: --trigger;
  width: anchor-size();
  height: anchor-size(height);
}

The width and height are calculated using the associated anchor.

Anchor names must use dashed identifiers beginning with two hyphens.

Using Calculations

The anchor-size() function can be combined with calc() to modify an anchor's dimensions.

For example, to make a dropdown twice as wide as its anchor:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: calc(anchor-size(width) * 2);
}

If the anchor is 150px wide, the dropdown becomes 300px wide.

You can also add or subtract lengths:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: calc(anchor-size(width) + 20px);
}

This makes the dropdown 20 pixels wider than its anchor.

To make an element half as wide as the anchor:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: calc(anchor-size(width) / 2);
}

The function can also be combined with max():

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: max(180px, anchor-size(width));
}

This prevents the dropdown from becoming narrower than 180px while allowing it to match a wider anchor.

Fallback Values

The anchor-size() function accepts an optional fallback length or percentage.

For example:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: anchor-size(width, 150px);
}

If the anchor's width cannot be resolved, the function uses 150px.

Fallback values can also use percentages:

.dropdown {
  position: absolute;
  position-anchor: --button;
  width: anchor-size(width, 50%);
}

The percentage is resolved according to the CSS property receiving the value.

If the anchor cannot be resolved and no fallback is supplied, the declaration does not provide a usable value.

For browsers that do not recognize anchor-size() at all, provide an ordinary CSS declaration before the function:

.dropdown {
  width: 180px;
  width: anchor-size(--button width, 180px);
}

The earlier declaration is retained by browsers that do not support the function.

The fallback argument inside anchor-size() is different from this browser compatibility fallback. It is evaluated only by browsers that understand the function.

Example

The following example demonstrates how anchor-size() makes a dropdown panel match the width of its anchor button.

The button is 180px wide. The panel uses anchor-size(width) to calculate its width and anchor() to position itself below the button.

HTML:

<div class="anchor-size-demo">
  <button class="anchor-size-trigger" type="button">Anchor Button</button>
  <div class="anchor-size-panel">Matches button width</div>
</div>

CSS:

.anchor-size-demo {
  position: relative;
  min-height: 140px;
  padding: 20px;
  border: 1px solid #ddd;
}
.anchor-size-trigger {
  anchor-name: --size-button;
  width: 180px;
  padding: 10px;
  border: 0;
  background-color: #0066cc;
  color: #fff;
}
.anchor-size-panel {
  position: absolute;
  position-anchor: --size-button;
  top: 68px;
  left: 20px;
  top: calc(anchor(bottom) + 8px);
  left: anchor(left);
  box-sizing: border-box;
  width: 180px;
  width: anchor-size(width);
  padding: 12px;
  background-color: #e9f2ff;
  border: 1px solid #0066cc;
  color: #333;
  text-align: center;
}

In browsers supporting CSS anchor positioning, the panel uses the button's measured width and appears 8 pixels below it.

In older browsers, the panel uses the fixed width and positioning declarations.

The example demonstrates sizing and positioning only. The button does not open or close the panel.

anchor() vs. anchor-size()

The anchor() and anchor-size() functions are related, but they return different measurements.

Use anchor() when you need to know where an anchor is located.

Use anchor-size() when you need to know how large the anchor is.

The functions can be combined:

.dropdown {
  position: absolute;
  position-anchor: --button;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
}

This positions the dropdown below the button and matches its width.

Common Uses

The anchor-size() function is useful when one element's dimensions should depend on another element.

For example, a floating panel can use the anchor's height as an offset:

.panel {
  position: absolute;
  position-anchor: --button;
  margin-top: calc(anchor-size(height) / 4);
}

If the button is 40px tall, the calculated top margin is 10px.

Limitations

The anchor-size() function has several important limitations.

• It is intended for absolutely or fixed-positioned elements using CSS anchor positioning.
• It is supported only in applicable sizing, inset, and margin properties.
• The referenced anchor must exist and satisfy the anchor eligibility rules.
• Specifying an anchor name inside the function does not automatically establish an anchor association.
• It returns a length rather than a position or an angle.
• It does not automatically prevent content overflow or text clipping.
• Older browsers may not support the function.

For example:

.example {
  position: absolute;
  position-anchor: --button;
  width: anchor-size(width);
}

This is a valid use when the named anchor is eligible.

However:

.example {
  background-color: anchor-size(width);
}

This is invalid because background-color requires a color, not a length.

Likewise, anchor-size() cannot be used to retrieve the anchor's coordinates. Use anchor() for anchor-relative positioning.

Browser Support

The anchor-size() function is part of CSS Anchor Positioning. It is classified as Baseline Newly available, with support across the latest major browser versions since January 2026.

Older browsers may not support the function, and some related anchor positioning features may have different compatibility levels.

For broader compatibility, provide a standard CSS declaration before the anchor-based declaration:

.dropdown {
  width: 180px;
  width: anchor-size(--button width, 180px);
}

Browsers that do not recognize anchor-size() retain the earlier valid declaration.

You can also test for syntax support with @supports:

@supports (width: anchor-size(width)) {
  .dropdown {
    width: anchor-size(--button width, 180px);
  }
}

The @supports condition checks whether the browser recognizes the declaration. It does not guarantee that a suitable anchor exists.

For current compatibility information, visit Can I Use? and search for CSS Anchor Positioning.

Specifications

The anchor-size() function is defined in the CSS Anchor Positioning Module Level 1 .

The specification defines how anchor-positioned elements can calculate lengths from the dimensions of eligible anchor elements.

Related features include anchor(), anchor-name, position-anchor, position-area, and CSS position fallback properties.