2026 is near. Or maybe you're from the

future and it's already 2026. Either

way, here's 10 new CSS features that you

should know as AI probably doesn't yet.

We'll start out nice and simple with my

favorite addition, squirles. We can

finally make corner shapes in more

interesting ways than just rounded

edges. Round is the default. This is

just your normal border radius. But then

you can get creative with options like

bevel, which is a straight line that

cuts across the corner. Notch, which is

an inward rectangular cut where you can

get some really cool cross shapes. Scoop

for an inward curved cut. And as I said,

the most important of them all is

squirle. I'm just the most excited for

this one as I think it's a really cool

subtle shape. And it's great that we can

now make this without the pain of using

SVGs and path clipping. You can even

provide different options for each

corner, which allows you to create some

super odd shapes. But if that's not

enough customization for you, well,

feature two is the new shape function.

If we use the shape function with clip

path, we can provide our fill rules.

We're essentially just defining what the

shape is. We're telling it the shape

outline. You can see a few variations

here using lines for our star or we can

use arcs for a different style of star.

And we can even use things like

horizontal and vertical lines as well.

You'll actually notice that the shape

function is very similar to the path

function except shape is much more

powerful. It allows for a variety of CSS

syntax and units like percentages, m or

rem units. Path is actually just limited

to pixels. And shape also lets you use

CSS math functions like calc, max, and

absolute. It's essentially just path on

steroids. I mean, I managed to use the

shape function to write subscribe.

Something you should absolutely do now

because apparently 79% of you watching

aren't and you're missing out on great

developer content. Where shape gets

really cool though is using this in

combination with offset path to create

animations that follow unique shapes.

You can do some really creative

animations with this. Moving on though,

our next few features are all about

using less JavaScript. Starting out with

feature number three, which is a long-

aaited one. You can finally style HTML

selects. It is absolutely crazy that it

took this long. You can opt into this by

setting the appearance to base select.

And from here, we're able to style

things like the picker, essentially just

this main select box, the picker icon

where we can animate things based on the

open and close state. Great for a

chevron like this. We can then style the

open state of the select. In this case,

I'm actually just removing the rounded

borders on the bottom so that it

connects nicely with the options. Then

we can style those individual options.

We can do this first based on whether

it's checked or not. Then we can

customize the check mark itself to use

something custom. To me, the more we're

able to do in CSS compared to

JavaScript, the better. And feature 4

also follows that trend. This is the new

scroll marker pseudo element. These act

like anchor links where the user can

click them and jump to a specific point

in the scroller. And it's perfect for a

use case like this, which is a carousel

made with zero JavaScript. To do this,

simply set the scroll marker group to

after on the carousel element, and then

for each item in that carousel, we style

the marker. We apply a different style

if it's the active target. And finally,

we style the group of them as flex here,

center them, and add a nice gap between

them. With that, we end up with these

nice round buttons underneath our

carousel. There's also a scroll button

pseudo element, which essentially just

adds buttons for controlling the

scrolling of a scroll container. Again,

perfect for a use case like a carousel

where you want to place some buttons to

go backwards and forwards within it. All

of this without JavaScript. While we're

on the topic of scrolling, feature five

is container scroll state queries. These

let you style based on whether something

is scrollable, stuck, or snapped. Again,

replacing what's previously been done in

JavaScript, usually with complex

timeouts or scroll events. To use these,

the container first needs to have a

container type set to scroll state. And

then you can optionally give it a

container name if you want to target

this specifically later. Then we have

three choices. First, we can style based

on if a sticky element is stuck or not.

In the case of this header, that means

as soon as the header is stuck on the

top, aka we started scrolling down, then

the sty will be applied. If we scroll

back up to the top, you can see the

style is unset. The second choice is

snapped styling based on if the

container is going to be snapped to a

scroll snap container. Yes, I know that

sounds a little bit confusing, but in my

example in this carousel, each item has

been scaled down and had its opacity

lowered, unless it's been snapped to, in

which case we set the opacity back to

normal and the scale back to one.

Essentially just creating a nice

animation when navigating between our

elements in this carousel. The final

option is scrollable. This checks if the

container can be scrolled in a given

direction. In this case, can the

container be scrolled upwards? At the

start, this is going to be false as

we're already at the top of the scroll

here. But if we start scrolling, you can

see the style is applied. And in this

case, I've used it to reveal a scroll to

the top button. For features six and

seven, let's have a pallet cleanser.

Some very simple features before we move

on to some really powerful functions.

Number six is the stretch keyword, which

you can now use for height and width.

Stretch does the same thing as 100%, but

it resizes the element, including its

margin, regardless of what you have set

for box sizing. Take this example. If we

use 100% for both the width and the

height of this inner box, you can see it

fills the container entirely. But if we

add on a margin of 20 pixels, you can

see this gets misplaced. But if we

change both the width and the height to

use stretch, you can see that it's

setting both the width and the height to

100% but including the margin that we

added on as extra. So it's resizing the

element, including its margin box. It's

essentially the true 100% value. Moving

on to feature 7. This solves another

long-standing CSS pain point. The CSS

textbox property allows us to choose

where and how much whites space is

trimmed from the top and bottom of text.

This is the default when we have text in

CSS. You can see from our borders here,

there's some additional white space

above and below this text. If we use the

textbox property though, we can control

how much of this white space is trimmed.

The first value of text box can either

be trim start aka trim the white space

above the text, trim end for below, and

trim both for well pretty

self-explanatory for trimming both above

and below. But the important part is how

we're trimming the whites space. That's

what we need to specify next. First, we

need to specify this for the top. Here

the default value is simply text, but we

can use cap to trim this text to the

capital letter height or we can use x to

trim it to the height of a lowercase x.

Then for our second option, we can say

how much we want to trim the bottom

white space. Again, text here is the

default value, and the only other option

that we have here is alphabetic, which

trims underneath the text to the bottom

of most characters, essentially, just

not your Y's or your G's. This diagram

showcases well all of those individual

values that you can trim to above and

below your text. This is particularly

useful for use cases like aligning the

top of text correctly with another

element, like this image of a kitten. By

default, the extra white space here

means that it's misaligned. But if we

trim the top to the capital letter

height, you can see it fits perfectly

and it's aligned with the top of the

image. Here I'm actually using text box

edge as well which just trims the top.

It's the equivalent of using text box

and saying trim start cap text. Now our

last few features are functions. CSS is

getting seriously powerful. First we

have the sibling index function. This

returns an integer representing the

position of the current element relative

to all its sibling elements. So on the

left here we have an unordered list and

each element in it when using the

sibling index function will have a value

of 1 to six. This means to create the

staggered width that I have here, all

I've had to do is take the sibling index

function and multiply it by 50 pixels.

So we have a width of 50 for the first

one, 100 for the second, and so on. This

gets really useful for things like

animating. To animate each element on a

delay, I can simply use the sibling

index function and multiply it by the

delay that I want. No complex JavaScript

needed. For feature 9, we have if

functions. Yes, CSS now has inline

conditionals. For any property, we can

use the if function and we can specify

some conditions based on either a media

query, style query or supports query.

And for the first condition that's found

to be true, the property will be set to

that value. You can also specify the

fallback for if all of them are false.

This can allow you to use inline

conditions such as choosing a background

and text color based on the selected

theme. Here, when a button is clicked,

the theme variable is set and our if

condition applies the styles

accordingly. Previously, you would have

to use a separate style query for this.

Another useful example is setting the

flex direction based on the width of a

media query. So when we get to less than

300 pixels, we can switch the flex

direction to column. And again,

previously you would have had to set the

flex direction to column. Then in a

separate media query, you define the

logic for what happens if it's above 300

pixels. And now last but not least,

feature number 10. Perhaps the most

powerful in the right person's hands. We

have custom functions in CSS. We can

give our custom function a name, then

define if it takes in any parameters,

and then inside of this, we can define

any local variables, run our logic, and

finally return a result. Here's an

example of a custom function called

alpha, which just takes in a color and a

transparency value and computes the okay

LCH value. Functions like this just let

you create clean reusable syntax.

Another example of the reusable syntax

is this custom narrow wide function.

This takes in two values, narrow and

wide. And based on the state of a media

query, aka is the container less than

300 pixels, it's either going to return

the narrow value or the wide one. You

can see this just creates really clean

code when we use it in the container for

flex direction and also the heading for

font size. It keeps all of this in line

instead of having to handle it with a

separate media query. There we go. That

is 10 new CSS features to get you ready

for 2026. Let me know in the comments if

you have a favorite one or if I missed

one that you think should have been

included. While you're down there,

subscribe. And as always, see you in the

next one.