Modern CSS: New Features

1. Corner-shape: new corner shapes

The Corners Level 2 CSS specification adds the corner-shape property, which changes the shape of rounded corners. Previously, border-radius only produced circular rounding; now new options are available.

Possible values

Syntax

.card-ticket {
border-radius: 20px;
corner-shape: scoop;
}
.badge {
border-radius: 8px;
corner-shape: bevel;
}
.app-icon {
border-radius: 22%;
corner-shape: squircle;
}

Different shapes for different corners

You can set a different shape for each corner individually:

.creative-card {
border-radius: 20px;
corner-shape: scoop round bevel round;
/* top-left top-right bottom-right bottom-left */
}

2. Modern color syntax

CSS is evolving from the old rgba() syntax toward new, more powerful ways of specifying colors.

New rgb / hsl syntax (no commas)

Modern CSS lets you write colors with spaces instead of commas, and transparency with /:

/* Old syntax */
color: rgba(59, 130, 246, 0.5);
/* New syntax (no commas, no "a") */
color: rgb(59 130 246 / 0.5);
color: hsl(217 91% 60% / 0.5);

oklch — a perceptually uniform color space

oklch() defines a color through:

• L (lightness) — brightness from 0% (black) to 100% (white)
• C (chroma) — saturation (0 = gray, 0.4+ = vivid)
• H (hue) — hue in degrees (0 = pink, 90 = yellow, 180 = cyan, 270 = purple)

/* Blue with chroma 0.2 */
color: oklch(60% 0.2 250);
/* Semi-transparent green */
color: oklch(70% 0.18 150 / 0.7);

Why is oklch better than hsl?

In hsl, two colors with the same L can look differently bright to the eye (yellow seems lighter than blue). In oklch, the same lightness looks the same for any hue — this matters for design systems and palettes.

Relative colors

They let you create new colors based on existing ones — by changing individual components:

:root {
--brand: oklch(60% 0.2 250);
}
.card {
/* Take --brand and make it lighter */
background: oklch(from var(--brand) calc(l + 0.2) c h);
/* Take --brand and make it semi-transparent */
border-color: oklch(from var(--brand) l c h / 0.3);
}

Here from var(--brand) takes the source color, while l, c, h are its components, which can be modified with calc().

Practical application

:root {
--accent: oklch(55% 0.25 260);
}
.btn {
background: var(--accent);
}
.btn:hover {
/* Automatically darker shade */
background: oklch(from var(--accent) calc(l - 0.1) c h);
}
.btn:active {
/* Even darker */
background: oklch(from var(--accent) calc(l - 0.2) c h);
}

3. Animating an underline with a gradient

An animated link underline is a popular effect that can be implemented with background-image instead of text-decoration.

The idea

• The underline is a background-image in the form of a linear gradient
• The background size (background-size) changes from 0% to 100% on hover
• The transition is animated with transition

Basic example

.link {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size 0.3s ease;
}
.link:hover {
background-size: 100% 2px;
}

How it works

• linear-gradient(currentColor, currentColor) — a “gradient” made of a single color (that is, a solid line in the text color)
• background-position: 0% 100% — the background is anchored to the bottom-left corner
• background-size: 0% 2px — width 0% (invisible), height 2px
• On hover the width grows to 100% — the line “slides out” from left to right

Direction variations

/* Left to right (default) */
background-position: 0% 100%;
/* Right to left */
background-position: 100% 100%;
/* From the center outward in both directions */
background-position: 50% 100%;

A color gradient instead of a solid line

.link-gradient {
background-image: linear-gradient(90deg, #3b82f6, #8b5cf6);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size 0.3s ease;
}
.link-gradient:hover {
background-size: 100% 2px;
}

4. Summary table