Border Radius
Use rounded-{size} to apply uniform border radius to all corners of an element:
Style('rounded-sm ...')Style('rounded-md ...')Style('rounded-lg ...')Style('rounded-xl ...')Rounding sides separately
Section titled “Rounding sides separately”Use utilities like rounded-t-md or rounded-r-lg to round one side (two adjacent corners):
Style('rounded-t-lg ...')Style('rounded-r-lg ...')Style('rounded-b-lg ...')Style('rounded-l-lg ...')Rounding corners separately
Section titled “Rounding corners separately”Use utilities like rounded-tr-md and rounded-tl-lg to round a single corner:
Style('rounded-tl-lg ...')Style('rounded-tr-lg ...')Style('rounded-br-lg ...')Style('rounded-bl-lg ...')Using logical properties
Section titled “Using logical properties”Use rounded-s-{size}, rounded-e-{size} for the inline-start / inline-end corners (two each), and rounded-{ss,se,es,ee}-{size} for individual logical corners. They map to physical corners based on the active Directionality:
Style('rounded-s-lg ...')Style('rounded-s-lg ...')Creating pill buttons
Section titled “Creating pill buttons”Use rounded-full to render a pill:
Style('rounded-full ...', child: Text('Save Changes'))Removing the border radius
Section titled “Removing the border radius”Use rounded-none to reset:
Style('rounded-none ...', child: Text('Save Changes'))Class reference
Section titled “Class reference”| Class | Value |
|---|---|
rounded-none | 0px |
rounded-xs | 2px |
rounded-sm / rounded | 4px |
rounded-md | 6px |
rounded-lg | 8px |
rounded-xl | 12px |
rounded-2xl | 16px |
rounded-3xl | 24px |
rounded-4xl | 32px |
rounded-full | 9999px |
rounded-{t,r,b,l}-{size} | Two adjacent corners on the named side. |
rounded-{tl,tr,bl,br}-{size} | Single corner. |
rounded-{s,e}-{size} | Both inline-start / inline-end corners (logical). |
rounded-{ss,se,es,ee}-{size} | Single logical corner (resolved via Directionality). |