Loading video player...
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.
CSS is getting way more powerful than most people realize. From custom functions and conditionals to zero-JS carousels and scroll logic, here are 10 features you should know for 2026. š Relevant Links corner-shape: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape shape function: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape Custom Select: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select Scroll Markers: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::scroll-marker Scroll State: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries Text Box: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box Sibling Index: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sibling-index if() functions: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if Custom Functions: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Custom_functions_and_mixins/Using_custom_functions ā¤ļø More about us Radically better observability stack: https://betterstack.com/ Written tutorials: https://betterstack.com/community/ Example projects: https://github.com/BetterStackHQ š± Socials Twitter: https://twitter.com/betterstackhq Instagram: https://www.instagram.com/betterstackhq/ TikTok: https://www.tiktok.com/@betterstack LinkedIn: https://www.linkedin.com/company/betterstack š Chapters: 0:00 Intro 0:13 corner-shape 0:48 shape function 1:44 Custom Selects 2:24 scroll-marker 3:12 scroll-state 4:26 stretch 5:05 text-box 6:31 sibling-index 7:10 if function 7:58 Custom Functions