--- title: CSS Infinity Use Cases – Master.dev Blog | daily.dev description: CSS now supports an Infinity keyword, but it must be used inside calc(), such as border-radius: calc(infinity * 1px). This is useful for expressing... canonical: https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Infinity Use Cases – Master.dev Blog | daily.dev og:description: CSS now supports an Infinity keyword, but it must be used inside calc(), such as border-radius: calc(infinity * 1px). This is useful for expressing... og:url: https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq og:image: https://api.daily.dev/og/posts/6sp5H7gCQ.png og:image:alt: CSS Infinity Use Cases – Master.dev Blog 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. # CSS Infinity Use Cases – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 1 min read · 65 upvotes · 7 comments ## Summary CSS now supports an Infinity keyword, but it must be used inside calc(), such as border-radius: calc(infinity * 1px). This is useful for expressing intentionally huge values like 99999 in a clearer way. However, it doesn't work everywhere - it fails inside clamp() when using a large value like 1e5 as a bound, as demonstrated in a related CodePen example. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I use infinity in CSS to set a very large value like border-radius? CSS infinity must be used inside a calc() expression, such as border-radius: calc(infinity * 1px). It cannot be used as a bare value on its own. This is useful when expressing an intentionally huge number, since it communicates intent more clearly than writing an arbitrary large literal like 99999. _Developers exploring modern CSS calc() tricks can find practical writeups like this on daily.dev._ ### Does the CSS infinity keyword work everywhere large numbers are needed, like inside clamp()? No, infinity does not work as a large value inside clamp(), even when wrapped in calc(). In that specific case, a literal such as 1e5 is needed instead to achieve the same large-number effect, so infinity is not a drop-in replacement for every big-number use case. _Track these kinds of CSS edge cases and gotchas on daily.dev before they trip up your layout code._ ## Community discussion Top comments from developers on daily.dev. **@jliter85** · 4 upvotes > I didn’t even know CSS had Infinity. I’ve definitely used some ridiculous `99999px` values before just to make something effectively unlimited. `calc(infinity * 1px)` is a lot clearer about what you’re actually trying to do. **@codexsavage6s** · 2 upvotes > What are some instance where this infinity is used **@agustinbarrientos** · 0 upvotes > The full-round utility should keep a numeric fallback beside calc(infinity * 1px) until every supported browser handles it reliably ## Similar posts on daily.dev - [CSS Infinity Use Cases · July 25, 2026](https://daily.dev/posts/css-infinity-use-cases-july-25-2026-wwuly17lm) · Adam Argyle · 10 upvotes · 2 comments - [What’s \!important \#16: sibling-index\(\) Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More](https://daily.dev/posts/what-s-important-16-sibling-index-animations-use-cases-for-the-infinity-keyword-container-stu-akirmvywb) · CSS-Tricks · 3 upvotes · 0 comments - [How to use the "auto" value with clamp\(\)](https://daily.dev/posts/how-to-use-the-auto-value-with-clamp--zmemfbmfq) · CSS Tip · 8 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq) ```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":"CSS Infinity Use Cases – Master.dev Blog","url":"https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq"},"datePublished":"2026-08-20T18:02:27.954Z","dateModified":"2026-09-14T09:33:32.966Z","description":"CSS now supports an Infinity keyword, but it must be used inside calc(), such as border-radius: calc(infinity * 1px). This is useful for expressing...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2455886ca7172dd0bec1e96afb02741a?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2455886ca7172dd0bec1e96afb02741a?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","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":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":7,"discussionUrl":"https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":65},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"keywords":"css","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"CSS Infinity Use Cases – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq","comment":[{"@type":"Comment","text":"I didn’t even know CSS had Infinity. I’ve definitely used some ridiculous 99999px values before just to make something effectively unlimited. calc(infinity * 1px) is a lot clearer about what you’re actually trying to do.","datePublished":"2026-08-22T23:52:59.204Z","url":"https://daily.dev/posts/6sp5H7gCQ#c-iJsOxeqiM","author":{"@type":"Person","name":"John Liter","url":"https://daily.dev/jliter85","image":"https://media.daily.dev/image/upload/s--DQ2HUrO4--/f_auto/v1785100315/avatars/avatar_yHf9cPdgTQEtokv6d8qhM?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"What are some instance where this infinity is used","datePublished":"2026-08-21T18:27:01.418Z","url":"https://daily.dev/posts/6sp5H7gCQ#c-BWu7eYzgx","author":{"@type":"Person","name":"Code X Savage","url":"https://daily.dev/codexsavage6s","image":"https://lh3.googleusercontent.com/a/ACg8ocK0nX9sL5dY7tHjUSK8NtYvb4oRSKm0HcLfnPih5DEiqeeSlg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"The full-round utility should keep a numeric fallback beside calc(infinity * 1px) until every supported browser handles it reliably","datePublished":"2026-08-26T03:06:50.363Z","url":"https://daily.dev/posts/6sp5H7gCQ#c-KvJ9k7npH","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq#faq","mainEntity":[{"@type":"Question","name":"How do I use infinity in CSS to set a very large value like border-radius?","acceptedAnswer":{"@type":"Answer","text":"CSS infinity must be used inside a calc() expression, such as border-radius: calc(infinity * 1px). It cannot be used as a bare value on its own. This is useful when expressing an intentionally huge number, since it communicates intent more clearly than writing an arbitrary large literal like 99999. Developers exploring modern CSS calc() tricks can find practical writeups like this on daily.dev."}},{"@type":"Question","name":"Does the CSS infinity keyword work everywhere large numbers are needed, like inside clamp()?","acceptedAnswer":{"@type":"Answer","text":"No, infinity does not work as a large value inside clamp(), even when wrapped in calc(). In that specific case, a literal such as 1e5 is needed instead to achieve the same large-number effect, so infinity is not a drop-in replacement for every big-number use case. Track these kinds of CSS edge cases and gotchas on daily.dev before they trip up your layout code."}}]} ```