The soon-Baseline sibling-index() function for animations, CSS and the 2026 FIFA World Cup, use cases for the infinity keyword, container "stuck" queries, and more.
What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks and lines progress.
.element {
writing-mode: vertical-rl;
}This is most useful in languages such as Chinese, Japanese or …
writing-mode originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
The pointer-events property controls whether an element can become the target of pointer events like clicks, hover states, and other pointer-based events. In other words, it lets you decide whether the browser should treat an element as interactive when the pointer is over it.
.no-pointer-events {
pointer-events: none;
}To understand how the property works, it helps to know what the browser does before it fires a pointer event. First, it has to determine which element is under the pointer. This process is known as hit-testing.
Normally, the browser chooses the topmost element under the pointer. But if that element has pointer-events set to none, the browser skips it and continues looking for the next eligible element underneath.
Once you think about pointer-events this way, most of its behavior starts to make sense. Rather than disabling events, it simply changes which element (or, in the case of SVG, which part of an element) becomes the event target in the first place.
pointer-events: auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none;pointer-events: auto;
pointer-events: none;
/* SVG values */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;Besides the standard CSS global values shown above, pointer-events defines eleven keyword values. You’ll use auto and none with both HTML and SVG elements, while the other nine are SVG-only and provide finer control over which parts of a graphic can receive pointer events.
auto: The default value. The element behaves normally and can receive pointer events. In SVG, this behaves the same as visiblePainted.none: The element itself can’t become the target of pointer events, meaning it can’t be clicked or hovered. Instead, the browser targets whatever is underneath it.visiblePainted: The element only receives pointer events when it’s visible (visibility: visible) and the pointer is over a painted part of the graphic. In other words, it’s over a filled area (fill is not none) or a stroked edge (stroke is not none).visibleFill: The element only receives pointer events when it’s visible and the pointer is over its fill, regardless of the value of the fill property, meaning it can even be set to none.visibleStroke: The element only receives pointer events when it’s visible and the pointer is over its stroke, regardless of the value of the stroke property.fill and stroke properties.painted: The element only receives pointer events when the pointer is over a painted part of the graphic (its fill or stroke), regardless of the value of the visibility property.fill: The element only receives pointer events when the pointer is over its fill, regardless of the values of the fill or visibility properties.stroke: The element only receives pointer events when the pointer is over its stroke, regardless of the values of the stroke or visibility properties.bounding-box: The element receives pointer events anywhere inside its bounding box—the smallest rectangle that completely surrounds it—regardless of its shape, even if parts of that area aren’t painted.all: The element receives pointer events when the pointer is over either its fill or stroke, regardless of the values of the fill, stroke, or visibility properties.One thing that’s easy to miss is that pointer-events is an inherited property. Setting pointer-events to none on a parent means its children inherit that value as well. However, any child can override the inherited value by setting pointer-events back to auto (or another valid value).
.parent {
pointer-events: none;
}
.child {
pointer-events: auto;
}In this example, the parent ignores pointer events, but the child can still become their target.
A common use case is a modal. You might use a full-page container to center the modal, but that container also covers the entire viewport. Without changing its pointer-events value, it prevents pointer events from reaching the elements underneath it. Setting pointer-events to none on the container fixes that, but because the property is inherited, you’ll also need to restore the modal itself with pointer-events set to auto.
In the following demo, when the pointer-events property is specified as none you can interact with the background buttons even though they are behind the overlay.
The pointer-events property only determines which element becomes the event target. It doesn’t change how events travel through the DOM afterward.
For example, if a child with pointer-events: auto is clicked inside a parent with pointer-events: none, the child still becomes event.target. From there, the event follows its normal capture and bubble phases, so event listeners attached to the parent still run.
In other words, pointer-events affects target selection, not event propagation.
In the following demo, you can see how the parent with pointer-events: none can still receive click, pointerenter, and pointerleave when you click or move the pointer into or out of its interactive child.
The pointer-events property only prevents the element from becoming the target of pointer events. Therefore, the element can still receive keyboard focus with the Tab key, and users can continue interacting with it using the keyboard if it’s otherwise focusable.
If you need to disable a native form control, use the disabled attribute instead. And if your goal is to make an entire section of the page completely non-interactive—including pointer input, keyboard focus, and the accessibility tree—the inert attribute is a better choice.
Setting the pointer-events property to none doesn’t stop users from selecting text. For example, users can still select the text by pressing Ctrl/Cmd + A on the keyboard.
That’s because text selection isn’t determined by whether an element can become the target of pointer events.
If your goal is to prevent text from being selected, use the user-select property instead.
.avoid-user-selection {
user-select: none;
}Try selecting the text in each block below:
When building a navigation menu, a common pattern is to hide a submenu by setting its opacity to 0 and then make it visible when the user hovers over its parent menu item. The problem is that the submenu is still there, so it can still receive pointer events even though you can’t see it.
Below, you can see two identical menus. One hides its submenu using only opacity, while the other also uses pointer-events. Hover over the hidden submenu area and try interacting with the content behind it to see how pointer-events prevents invisible elements from getting in the way.
Also, to better understand how each SVG value of this property works, pick one from the dropdown and move your pointer around the ring: over its filled band, inside its hollow center, and over the empty corners of the dashed bounding box. Notice how the interactive area changes with each value.
pointer-events originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
Similar to last time, What’s !important #15 is pretty stacked — read all about boundary-aware CSS, making grid lanes accessible, creating time-based web designs, fixing full-bleed CSS, improving customizable <select>, new web platform features, and more.
view() for boundary-aware CSSPreethi Sam very expertly walked us through the concept of boundary-aware CSS. Using view(), Preethi was able to create a range of really useful effects, some of which I’ll share below:
I also wrote a little something for the Master.dev blog, about making interactive elements invisible but accessible. It sounds like more work is needed to make it fully accessible, and that a new value for the hidden attribute could be the answer.
Dan Holloran wrote about grid lanes layout (formerly “masonry layout” or “that thing that Pinterest did”).
Manuel Matuzović said that it isn’t accessible (grid lanes layout, that is, not Dan’s article, which is great and gets straight to the point).
In a follow-up article a few days later, MM suggested using reading-flow to make grid lanes accessible, which seems like the right call but hasn’t been tested yet.
Sophie Koonin demonstrated how to make a website change according to the time of day using the Temporal API and color-mix(). Enough said, that’s just awesome (like macOS’s dynamic wallpapers).
David Bushell showed us how to fix full-bleed CSS. That is, how to make something span the entire horizontal viewport (without any overflow — that’s the tricky part!) despite being nested within another element. I just love to see old problems being solved with modern CSS (hint: it’s container query units).
And if that isn’t already cool enough, Temani Afif recently shared another breakout technique right here on CSS-Tricks that uses the new border-shape property.
Don’t you wish you could travel back in time and change a few things? We all do. In fact, the CSS Working Group lists some of the things it would change about CSS.
And that’s why Declan Chidlow created FixCSS, which… well… fixes CSS in accordance with that. Now we can finally swap border-radius (the Ethan Tremblay of CSS) for corner-radius. All is right with the world again.
<select>Jake Archibald demonstrated how to improve the UX of customizable <select>s, addressing some sizing-related issues. It’s a must-read for anybody thinking about using customizable <select>.
By “new” I mean anything from still-not-fully-supported-yet to recently released to upcoming. Either way, here’s Bramus and Una Kravets at Google I/O 2026 with 35 web platform features that you might not have heard of yet or might want to be reminded of:
AccentColor and AccentColorText (now Baseline)<image> support for light-dark() (no Safari support)background-clip: border-area (no Firefox support)polygon() (no Safari or Firefox support)zoom (no Safari or Firefox support)text-fit (no Safari or Firefox support)flex-wrap: balance (no Safari or Firefox support)named-feature() (no Safari or Firefox support)focusgroup attribute (no Safari or Firefox support)overscroll-behavior: chain (chaining with no overscroll, no Safari or Firefox support)What a couple of weeks! See you in another two!
What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
So, we recently got the new shape() function (now Baseline!) as well as the corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
shape()?corner-shape?border-shape?! Where did all these come from?
If you are not a CSS shape fanatic like me, you probably missed these features when they came out, so let’s give them brief, formal introductions, starting with…
shape() and corner-shapeThe shape() function is a new value for clip-path and offset-path that uses SVG syntax to create CSS shapes much more easily than, say, path(). I wrote a four-article series exploring this feature, and another article where I explore the creation of complex shapes.
Speaking about SVG, you can express any SVG shape using shape(). Said differently, you can convert any SVG shape into a CSS shape and, guess what, I made a converter that does exactly that!
As far as corner-shape goes, it’s a property that works in conjunction with border-radius. As its name suggests, it allows you to control the shape of an element’s corner using predefined keywords.
.corner {
border-radius: 20px;
corner-shape: round | scoop | bevel | notch | squircle;
}
It can also be used to create common CSS shapes, like I get into in another article, “CSS Shapes using corner-shape.”
But is this the corner-shape property really useful or even needed? Except for the squircle value, most of the shapes can already be created using clip-path or mask. But what corner-shape does that these others can’t is easily add borders and other decorations to those shapes!
corner-shape will not only shape the corners, but it also supports other properties like border and box-shadow, allowing them to follow the shape rather than the element’s box. This is a game-changer because we all know that adding borders to shapes is a nightmare.
Support is still not great (Chromium-only as I’m writing this), but it’s a good time to explore it and get an overview of its potential.
border-shape!Shaping corners is good, but it’s still fairly limited as far as what we can do with it. Like, what about shaping the whole element instead? That’s what border-shape will do. It accepts the same values as clip-path, including the new shape() function.
So, it has the same job as
clip-path? What’s new?
Like with corner-shape, most decorative properties such as border, box-shadow, and outline follow the shape.
clip-path (and mask) will clip/mask the whole element, including the decorations, so having borders is a big NO. That’s a major problem for creating CSS shapes.
The border-shape property is here to solve this issue. Instead of clipping the element, it “shapes” the element, allowing its decorations to follow that shape. In other words, putting borders on CSS shapes will become child’s play!
Not to mention that border-shape is also very easy to use. If you are familiar with clip-path, then you practically have nothing new to learn. Simply replace one property with another, and you are done.
.shape {
/* Old code */
clip-path: shape() | polygon() | ...;
/* New code */
border-shape: shape() | polygon() | ...;
}I invite you again to learn more about the shape() function because it’s the value that makes border-shape really powerful. The two really go hand-in-hand.
Now that you know the basic use of the property, shall we start the fun stuff? I are here to push the limits and show you what is possible using border-shape.
Note: Support is limited to Chrome-only for now so check out the next demos using Chrome.
As I said, the first major advantage here is adding borders to shapes that follow the actual shape, which also means the ability to create border-only shapes. All you have to do is write the following code:
.shape {
border: 8px solid red;
border-shape: /* your shape code */;
}No more hacks and no more headaches!
Most of the shapes are already available in my CSS Shapes collection, so really, making border-only shapes is something you can do with a simple copy/paste. Even some of my online generators are already configured to provide border-only versions of complex shapes, like blobs, wavy lines, and fancy frames, among many, many others.
Let’s take the previous code and update it as follows:
.shape {
border: 8px solid red;
border-shape: inset(0) /* you shape code */;
}You keep the shape code you had, and you add inset(0) at the beginning. Yes, you can have two shape values inside border-shape and the result will be as follows:
From the specification:
The
border-shapeproperty accepts either a single<basic-shape>or two<basic-shape>s:Single
<basic-shape>(Stroke mode): The border is rendered as a stroke along the shape’s path, with the stroke width determined by the relevant side’s computed border width. This mode is useful for creating outlined shapes.Two
<basic-shape>s (Fill mode) The border is rendered as the area between the two paths. The first shape defines the outer boundary, and the second shape defines the inner boundary. This mode provides precise control over the border region’s geometry.
Using a basic rectangle as the outer shape (inset(0)), I was able to easily transform the border-only version into a cutout version!
Do you want the shape inside a circle? Easy!
All I did is replace inset(0) (a rectangle) with circle() (a circle).
But we can do this with a simple
border-radius: 50%, right?
No! When working with border-shape, the border-radius is ignored, which is kind of logical since we no longer have corners to round — the element is now shaped. This is not a big deal since we can literally create any kind of shape that replaces the use of border-radius, as shown in the previous example.
Note: If you are wondering why I am using circle()without any argument, check out my article “CSS Functions that work without arguments.”
Here are a few more examples with the two shapes value to look at before we move to the next part:
You can literally use any combination to get complex-looking shapes without a bunch of effort!
Now let’s take a block of text and apply the previous code with the two shape values:
.box {
border-shape: inset(0) circle();
border-color: pink;
}Perhaps this is nothing surprising considering what we have learned so far. We define two shapes and the border is drawn inside the area between them. What’s new here is that we are dealing with content and, as you can see, it overlaps the border.
border-shape shapes the whole element, including the element’s decoration, but any content inside remains unchanged and follows the initial rectangle shape. That’s not new behavior since the same happens even even with classic border-radius. And the content will overflow unless we decide to hide it using overflow hidden.
In this case, I won’t consider the overflow property as I want the content to overflow and be placed on top of the border decoration.
Now let’s update the code of the shape like this:
.box {
border-shape: inset(0 -100px) circle(50px);
border-color: pink;
}I made the circle smaller and the rectangle bigger. Do you see where I am going? By making the radius of the circle 0 and the rectangle bigger, I create a breakout background effect!
.box {
border-shape: inset(0 -100vw) circle(0);
border-color: pink;
}
The element remains centered, but its background (that we are simulating using a border!) extends to the edge of the screen.
And this is not limited to using two shape values. Even with the one shape value, we can achieve a breakout decoration (which is typically difficult) if you consider any value that gets you out of the element’s boundary.
Here is a demo with many examples that I’ll let you explore:
Let’s piggy-back off that last demo to try different decorations.
This time, instead of extending outside the element boundary, I am staying within it to create partial decoration. In other words, we no longer have boundaries. border-shape has no limit. The only limit is your imagination!
I am mainly relying on the shape() function to create the decoration, so do yourself a favor and explore this feature by reading my four-article series! If you master shape(), you can easily produce complex decorations using border-shape.
Yes, border-shape can be animated, and we can have different kinds of animations. With the two-value syntax, we can animate the border-width value to create a reveal effect:
Hover the below and see the result:
Cool, right? We can also apply this to image elements as well:
We can also animate the shape values to create more complex animations. Here is a demo of a bouncing hover effect applied to blob shapes (from my article “Making Complex CSS Shapes Using shape().”
I take the same code, replace clip-path with border-shape, and tada!
And why not add a subtle animation to those previous decorations? Hover the titles and the text to see what happens:
Here is a hand-drawn underline that slides between the menu items on hover. Straight lines are boring!
And why not an electric frame around your content? Don’t worry, it’s safe for touch screens.
What about a fancy border-only loader? (code taken from my squishy loader collection)
Let’s connect circles with a straight line that bends when the circles get closer and stretches when they get farther. Drag the circles in the demo below and see the magic in play:
I think it’s clear now why I am calling this new property “powerful.” In addition to making it easy to create CSS shapes, it lets us add fancy decorations, cool animations, and more!
I didn’t go into fine detail with most of the demos as I wanted to keep this a light article showing the potential of border-shape. Now that you know we can create crazy stuff with it, stay tuned for more elaborate articles!
Don’t forget to bookmark my CSS Shapes collection and my online generators. I have already updated many of the shapes using shape(), and I am in the process of also including the border-shape version.
Get Ready For the Powerful CSS border-shape Property! originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
With a high of F and a low of 58F. Currently, it's 66F and Rain outside. Current wind speeds: 7 from the North Pollen: 3 Sunrise...
