--- title: A new way to style gaps in CSS | daily.dev description: CSS gap decorations is a new feature available in Chrome and Edge 139 that allows developers to style gaps between items in flex, grid, and multi-column... canonical: https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A new way to style gaps in CSS | daily.dev og:description: CSS gap decorations is a new feature available in Chrome and Edge 139 that allows developers to style gaps between items in flex, grid, and multi-column... og:url: https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp og:image: https://api.daily.dev/og/posts/9lolqU2YP.png og:image:alt: A new way to style gaps in CSS og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # A new way to style gaps in CSS **[Chrome Developers](https://daily.dev/sources/chrome)** · 5 min read · 110 upvotes · 4 comments ## Summary CSS gap decorations is a new feature available in Chrome and Edge 139 that allows developers to style gaps between items in flex, grid, and multi-column layouts without using border or pseudo-element workarounds. The feature extends the column-rule property to work with grid and flexbox layouts and introduces a new row-rule property. It offers benefits like no layout impact, repeat syntax for patterns, cleaner markup, and enhanced customizability through new properties like rule-break, rule-outset, and gap-rule-paint-order. The feature is currently in developer trial and requires enabling experimental web platform features. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@clx** · 0 upvotes > Good addition, folks!🚀 Finally grid lines become pretty without juggling various techniques to achieve simple decorations 💅 **@petecapecod** · 0 upvotes > Cool this will be a nice feature when it fully lands 🎉 **@felix\_berlin** · 0 upvotes > Pretty nice 😍 **@dannyleo** · 0 upvotes > I've bot encountered the problem my self but this would be really cool when it comes out --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#google-chrome](https://daily.dev/tags/google-chrome) [View this post on daily.dev](https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A new way to style gaps in CSS","url":"https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp"},"datePublished":"2025-06-13T17:48:49.896Z","dateModified":"2025-06-13T17:49:14.556Z","description":"CSS gap decorations is a new feature available in Chrome and Edge 139 that allows developers to style gaps between items in flex, grid, and multi-column...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/85df0a82aac99802a436567370a8f08d?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/85df0a82aac99802a436567370a8f08d?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"Chrome Developers","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Chrome Developers","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/e9b306fd1b484113b937dae36b867f37","url":"https://daily.dev/sources/chrome"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":110},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"webdev,css,google-chrome","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Chrome Developers","item":"https://daily.dev/sources/chrome"},{"@type":"ListItem","position":3,"name":"A new way to style gaps in CSS"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp","comment":[{"@type":"Comment","text":"Good addition, folks!🚀 Finally grid lines become pretty without juggling various techniques to achieve simple decorations 💅","datePublished":"2025-07-14T22:43:48.956Z","url":"https://daily.dev/posts/9lolqU2YP#c-7oBqqZjeW","author":{"@type":"Person","name":"clx","url":"https://daily.dev/clx","image":"https://media.daily.dev/image/upload/s--Mkkvkag8--/f_auto/v1751188138/avatars/avatar_5vXBNAjzbZrl3T40Y4VMb?_a=BAMClqZW0"}},{"@type":"Comment","text":"Cool this will be a nice feature when it fully lands 🎉","datePublished":"2025-06-23T15:07:33.751Z","url":"https://daily.dev/posts/9lolqU2YP#c-BxkQFMzJV","author":{"@type":"Person","name":"Peter Cruckshank","url":"https://daily.dev/petecapecod","image":"https://media.daily.dev/image/upload/s--ZJhQyKws--/f_auto/v1721235024/avatars/avatar_A9xh33q0QoxtkGoJRCosp"}},{"@type":"Comment","text":"Pretty nice 😍","datePublished":"2025-06-20T10:45:59.838Z","url":"https://daily.dev/posts/9lolqU2YP#c-YbxxUtyUX","author":{"@type":"Person","name":"Felix Scholze","url":"https://daily.dev/felix_berlin","image":"https://avatars.githubusercontent.com/u/17964384?v=4"}},{"@type":"Comment","text":"I’ve bot encountered the problem my self but this would be really cool when it comes out","datePublished":"2025-07-21T12:43:03.468Z","url":"https://daily.dev/posts/9lolqU2YP#c-iQJRqaCdK","author":{"@type":"Person","name":"Danny","url":"https://daily.dev/dannyleo","image":"https://avatars.githubusercontent.com/u/142972494?v=4"}}]} ```