The Interop 2027 CSS shortlist reads like a list of hacks you get to delete

You want hairlines between the cells of a 3×3 grid. Two cells have content. Seven are empty. And an empty grid cell has no element, so there is nothing to put border: 1px solid on.

So you fake it. Paint the grid container red, set gap: 1px, give every child a white background, and pad the markup with seven empty divs so the background only shows through the gaps. It works. It's also seven DOM nodes that exist purely to hide paint.

Josh W. Comeau shows that exact workaround in his new post on Interop 2027, and then shows the property that makes it unnecessary. That's the useful way to read his whole list. Most of the ten features he voted for replace something we currently fake.

How the list gets made

Interop is the yearly project where the browser vendors (Comeau names Google, Apple, Microsoft and Mozilla, along with Igalia and Bocoup) agree on a set of focus areas and work on them together. He writes that a focus area added to Interop often reaches near-100% support across the major browsers within a year.

His example is subgrid. Firefox implemented it in 2019, other browsers barely moved for years, then it went into Interop 2023 and was widely available across modern browsers by the end of that year.

For 2027, the team at Mozilla built a ranking system where developers upvote the features they want, and Comeau writes that they plan to use that ranking data to decide what goes into next year's Interop.

Lines that belong to the grid

Gap decorations add a border-like syntax to the grid itself:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid red;
  rule: 1px solid red;
}

rule is a shorthand, like border. Width, style, color. Use row-rule or column-rule when you only want lines in one direction.

Comeau lists three problems with the background trick: the empty nodes, the fact that it only works on a solid page background, and the lost flexibility. For example, you can't leave space between the grid's outer border and its inner lines. The mechanism explains all three. The lines come from paint showing through a gap, so the gap is all you get to style. rule makes the line its own thing.

Corners the border box follows

border-radius puts a quarter-circle on each corner. corner-shape swaps that curve for something else: squircle, bevel, notch, scoop.

.box {
  border-radius: 16px;
  corner-shape: bevel;
}

You could already cut shapes like these with clip-path or masks. The difference is where the change happens. According to Comeau, corner-shape changes the shape of the border box itself, so borders, outlines and box-shadows follow the new corner. A clip only hides pixels, so the border and shadow get cut off with everything else instead of tracing the new edge.

border-shape goes a level lower. You draw the border yourself out of straight lines, arcs and Bézier curves, and the same thing holds: the real border box changes, so outlines and shadows trace it. Comeau calls corner-shape a perfect progressive enhancement. Unsupported browsers fall back to the plain rounded corner, which is fine.

auto gets a transition

You can't animate to height: auto. You've hit this. interpolate-size fixes it, alongside the related calc-size() function. Comeau's accordion demo opts in at the root and animates the ::details-content pseudo-element:

html {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  details {
    overflow: hidden;

    &::details-content {
      height: 0;
      transition:
        height 300ms,
        content-visibility 300ms;
      transition-behavior: allow-discrete;
    }
    &:open::details-content {
      height: auto;
    }
  }
}

Keep that @supports gate. Comeau warns that without it, unsupported browsers get a brief delay added. He also notes this has been in Chrome since 2024, which is a long time to wait for an accordion.

State you used to read from JavaScript

Several picks are queries for state that CSS couldn't see before.

• Scroll-state container queries. Put container-type: scroll-state on a sticky header and @container scroll-state(stuck: top) matches once it sticks. The same API answers scrollable: top and scrollable: bottom, which is all you need to fade those scroll-hint gradients in and out.
• Anchored container queries, from Level 2 of Anchor Positioning. They let you check whether a positioned element is using a fallback position, so a tooltip's pointer can flip when the tooltip does.
• Scroll-triggered animations. These are a separate proposal from scroll-driven ones: the animation starts when the user scrolls to a point and then runs over a specified duration. Today that means IntersectionObserver.
• reading-flow and reading-order. Tab order follows the DOM, not the layout, so a grid that rearranges on mobile focuses things in the wrong order. reading-flow: grid-rows on the grid makes focus follow the visual rows.

Functions, and one that exists nowhere

@function lets you define a custom function, such as --gradient-to-transparent(--color, --direction: bottom), and return its value with result. Call it like any other value: background: --gradient-to-transparent(red). Comeau writes that it is already implemented in Chromium browsers.

Then there's inherit(). Comeau says he couldn't find it implemented in any browser. It takes the inherited value and lets you do math on it, which is exactly what nested radii need:

p {
  border-radius: calc(inherit() - 4px);
}

He'd be a bit surprised if it makes the 2027 cut. I'd vote for it anyway.

Where support stands

The support tables in Comeau's post, marked current as of October 2026, list Chrome 155 and Edge 154 as supporting each feature that has a table, and Firefox 157 and Safari 27 as not supporting it. inherit() has no table because it isn't listed on caniuse. That's one engine family carrying every tabled feature today, which is the gap Interop exists to close.

For your next layout, sort by fallback. corner-shape and the gated interpolate-size accordion degrade to something perfectly usable, so ship them now. Gap decorations are harder. The fallback is no lines at all, so the background trick stays until rule ships in more than one engine. Whether that happens in 2027 depends partly on how the Mozilla ranking comes out.