(BUSAN.SASHIMI)
Weekly Digest // STYLING — Week 33-2026
paletteWeekly Report

Rounded clip-path Lands in Chrome — Week 33 CSS & Styling

Rounded polygons, animated border images, new Safari CSS primitives, and token-driven cascade layers expand declarative styling with explicit fallbacks.

calendar_todaysummarizeWeek 33-2026
TAG: CSS FEATUREREAD_TIME: 4_MIN

Fancy Clipping with CSS

Chrome now supports the specification's rounded polygon syntax, such as clip-path: polygon(round 10px, ...), avoiding many SVG-mask or gradient workarounds. Firefox and Safari currently treat that function as invalid and discard the whole polygon rather than falling back to sharp corners. A safe progressive-enhancement pattern stores the optional round fragment in an empty custom property and assigns it only inside @supports, keeping the baseline polygon valid. The article also demonstrates the widely supported nonzero and evenodd fill rules for controlling holes and overlaps. Those fill rules apply to polygon(), shape(), and path().

Read Articlearrow_forward
TAG: CSS FEATUREREAD_TIME: 6_MIN

Animating CSS border-image | CSS-Tricks

A gradient can act as a border-image-source, and registered custom properties make its otherwise awkward stops and angles animatable. The first example registers a percentage and moves a red-to-transparent linear gradient from 0% to 100%, creating a drawn-border effect. A conic variation registers number and angle values, animates border-image-slice from 1 to 20, rotates through 360 degrees, and uses border-image-repeat: round to fit complete tiles. Explicit transition properties keep the moving surface narrow. The main limitation is unchanged: border images do not follow rounded border geometry, so components that need curved motion may still require a mask-based technique.

TAG: TOOLINGREAD_TIME: 5_MIN

Solving CSS @Layer Ordering in Design Systems with Design Token Metadata

Generated design tokens need a portable way to declare which CSS cascade layer should receive each component's custom properties. The proposed workflow stores a namespaced layer value inside DTCG $extensions, whose preservation rule protects unknown metadata as token files pass through compliant tools. A plain top-level cssLayer key has no such guarantee, risks collisions, and incorrectly makes a CSS delivery concern look cross-platform. A small Style Dictionary format groups tokens by that extension and emits the matching @layer blocks. Component styles can remain unlayered or scoped, preserving an intentionally weak variable layer without specificity hacks or hand-authored ordering files.

TAG: ECOSYSTEMREAD_TIME: 3_MIN

Release Notes for Safari Technology Preview 250

Safari Technology Preview 250 adds CSS support for text-decoration-inset, white-space-trim, wrap-inside, content on ::marker, and the spaces value of ruby-overhang. It fixes selection decorations, orthogonal-writing-mode sizing, list markers, scroll snapping, and VoiceOver behavior in a trailing-newline <textarea>. JavaScript gains Explicit Resource Management plus Iterator.zip() and Iterator.zipKeyed(). Networking begins supporting streaming fetch() request bodies and the required Request.duplex option. Because Technology Preview is a test channel, teams should use it to validate upcoming behavior rather than treat these additions as stable cross-browser support.

summarizeDigest_Summary

Chrome now understands the specification-defined round parameter in clip-path: polygon(), producing rounded corners without an SVG mask or a stack of gradients. Other engines currently reject the entire rounded polygon, so the safe pattern stores the optional prefix in a custom property guarded by @supports; unsupported browsers still receive the sharp polygon. The widely supported nonzero and evenodd fill rules also work with polygon(), shape(), and path().

CSS-Tricks builds animated borders from a gradient-backed border-image. Registered percentage, number, and angle custom properties make the gradient stop, slice depth, and conic rotation interpolable, while border-image-repeat: round tiles complete slices. The important caveat remains geometric: border images do not curve to rounded border shapes.

Safari Technology Preview 250 adds text-decoration-inset, white-space-trim, wrap-inside, content on ::marker, and the spaces value of ruby-overhang. It also implements Explicit Resource Management, streaming fetch() uploads, and scrolling fixes. The practical pattern is progressive enhancement with a complete baseline: ship the relationship in CSS when supported, but never let a new syntax invalidate the essential shape, content, or interaction.

Design-token pipelines can make cascade policy explicit too. A namespaced DTCG $extensions value records the intended CSS layer without polluting the portable token model, and a Style Dictionary format groups the generated custom properties into matching @layer blocks. Unknown compliant tools must preserve that metadata, unlike an ad hoc top-level key.

Key Takeaways
  • Put the optional round fragment behind @supports and keep the ordinary polygon valid, because Firefox and Safari currently discard the complete rounded declaration.
  • Register the custom properties that drive gradient stops or angles before animating border-image, and test the square-corner limitation against the actual component shape.
  • Store CSS delivery metadata in a namespaced DTCG $extensions object and make the token build, not component authors, emit the agreed cascade layers.