Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

Soren

6,858 subscribers

76,659 views • 5 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Wes Bos

31,135 views • 1 year ago

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,155 views • 2 months ago

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

11,137 views • 3 months ago

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }

jhey ʕ•ᴥ•ʔ

486,204 views • 2 years ago

Clay's transition API is starting to shape up. It's modeled on the simplicity of CSS transitions (i.e. just specify property, duration and tween function, the rest is automatic) but with the ability to override the tween function so you can do whatever you want, frame by frame.

Clay's transition API is starting to shape up. It's modeled on the simplicity of CSS transitions (i.e. just specify property, duration and tween function, the rest is automatic) but with the ability to override the tween function so you can do whatever you want, frame by frame.

Nic Barker

13,982 views • 10 months ago

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it awesome work Noam Rosenthal 🦋 nomster.bsky.social and smfr!

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it awesome work Noam Rosenthal 🦋 nomster.bsky.social and smfr!

Adam Argyle

23,266 views • 1 year ago

here is the new CSS Border shape API this is going to unlock so many sick new designs

here is the new CSS Border shape API this is going to unlock so many sick new designs

Wes Bos

108,970 views • 1 month ago

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

Una 🇺🇦

13,352 views • 1 year ago

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,854 views • 1 year ago

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,682 views • 3 years ago

CSS Anchors are truly amazing! I built this without any animation library. This is part of an upcoming component library I’ve been working on.

CSS Anchors are truly amazing! I built this without any animation library. This is part of an upcoming component library I’ve been working on.

Haz

2,570,199 views • 4 months ago

we've literally been flying blind until now $ interpreter --vision > Recreate this component in Tailwind CSS (this is realtime)

we've literally been flying blind until now $ interpreter --vision > Recreate this component in Tailwind CSS (this is realtime)

killian

780,841 views • 2 years ago

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,452 views • 1 year ago

SAVE this drill!! Start in the corner ➡️ sprint to other corner Make or miss, sprint to opposite corner You can't 'unlock' the wing until you make both corners. Same rules apply for wing, top of the key The goal is to complete it as fast as u can Comment "Shooter" for my drills

SAVE this drill!! Start in the corner ➡️ sprint to other corner Make or miss, sprint to opposite corner You can't 'unlock' the wing until you make both corners. Same rules apply for wing, top of the key The goal is to complete it as fast as u can Comment "Shooter" for my drills

Danny Cooper

11,167 views • 2 months ago

"How much longer are you going to wait to demand the best of yourself?" Epictetus asked. With 2026 right around the corner, now is the time. It's time to start making progress towards your goals, it's time to get in shape, it's time to lower your anxiety, it's time to deepen your relationships. To help you in that direction, sign up for the New Year, New You Challenge at

"How much longer are you going to wait to demand the best of yourself?" Epictetus asked. With 2026 right around the corner, now is the time. It's time to start making progress towards your goals, it's time to get in shape, it's time to lower your anxiety, it's time to deepen your relationships. To help you in that direction, sign up for the New Year, New You Challenge at

Ryan Holiday

18,768 views • 5 months ago

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 views • 1 year ago

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

55,548 views • 3 years ago

Gemini 3. 1 Pro frontend capability is next level 🔥 Been working on this for some time. It's all CSS and incredibly performant! It's a Tauri app and uses only 3 – 4 MB of RAM.

Gemini 3. 1 Pro frontend capability is next level 🔥 Been working on this for some time. It's all CSS and incredibly performant! It's a Tauri app and uses only 3 – 4 MB of RAM.

can

165,174 views • 3 months ago

I saw this nifty CSS Video Masking technique on the iPad website. Pretty neat use of CSS - not what I expected!

I saw this nifty CSS Video Masking technique on the iPad website. Pretty neat use of CSS - not what I expected!

Wes Bos

583,260 views • 1 year ago