CSS Wrapped 2025

Chrome DevRel's annual recap highlights 22 new CSS features. Here are the ones worth knowing.

Customizable Select Elements

appearance: base-select unlocks full styling of <select> dropdowns.

IF UNSUPPORTED: You'll see a standard browser select below

select { appearance: base-select; }
select::picker(select) { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
select option:checked { background: #3b82f6; color: white; }

Support: Chrome 134+, Edge 134+

Native CSS Carousels

::scroll-button() and ::scroll-marker() pseudo-elements for accessible carousels without JS.

IF UNSUPPORTED: No navigation buttons or dots will appear

Slide 1

Slide 2

Slide 3

.carousel { scroll-snap-type: x mandatory; scroll-marker-group: after; }
.carousel::scroll-button(prev) { content: "←"; }
.carousel::scroll-button(next) { content: "→"; }
.slide { scroll-snap-align: start; scroll-marker: auto; }

Support: Chrome 135+, Edge 135+

Scroll-State Queries

Style elements based on scroll state with @container scroll-state().

IF UNSUPPORTED: Header won't change style when stuck

Sticky Header

Scroll to see header stick.

In supported browsers, it gains a shadow.

Keep scrolling...

.sticky-header { container-type: scroll-state; position: sticky; top: 0; }
@container scroll-state(stuck: top) {
  .sticky-header { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}

Support: Chrome 133+, Edge 133+

Invoker Commands

Declarative dialog/popover control with commandfor and command attributes.

IF UNSUPPORTED: Button won't open the dialog

<button commandfor="my-dialog" command="show-modal">Open</button>
<dialog id="my-dialog">
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Support: Chrome 135+, Edge 135+, Firefox 144+, Safari TP

Dialog Light Dismiss

closedby="any" enables click-outside and ESC to close dialogs.

IF UNSUPPORTED: Dialog won't close when clicking outside

<dialog closedby="any">Click outside or ESC to close.</dialog>

Support: Chrome 134+, Edge 134+, Firefox 141+

Corner Shape

corner-shape enables squircles, bevels, scoops beyond border-radius.

IF UNSUPPORTED: All shapes will appear as standard rounded corners

round

squircle

bevel

scoop

.squircle { border-radius: 20px; corner-shape: squircle; }
.bevel { border-radius: 20px; corner-shape: bevel; }

Support: Chrome 139+, Edge 139+

Anchor Positioning

Tether elements together with automatic edge repositioning.

IF UNSUPPORTED: Tooltip position is manually set, won't auto-flip

Tooltip

.trigger { anchor-name: --trigger; }
.tooltip {
  position: fixed;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: flip-block;
}

Support: Chrome 125+, Edge 125+, Safari 26.1+, Firefox 147+ (flag)

The if() Function

Inline conditional logic in CSS values.

IF UNSUPPORTED: Conditional styling requires JS or preprocessors

Dark

Light

.card {
  background: if(style(--theme: dark): #1f2937; else: ffffff);
  font-size: if(media(width >= 768px): 1.125rem; else: 1rem);
}

Support: Chrome 137+, Edge 137+

Full details at chrome.dev/css-wrapped-2025.