STYLES

Rounded

Shape corners with one portable radius scale shared by web, Android, and iOS.

RADIUS SCALE

Six corner shapes

Use a larger token for softer corners, or full for pills and circular surfaces.

xs

sm

md

lg

xl

full

COMPONENT EXAMPLES

Use the same shape language

Apply rounded directly to containers, controls, media, and other compatible components.

Compact card

Small corners keep dense interfaces precise.

Full follows the control shape.

D

Equal dimensions form a circle.

RESPONSIVE

Change shape by breakpoint

Responsive objects use xs as the base and apply later values at their named breakpoints.

dowe
Card rounded:{ xs:"sm" md:"xl" } p:6
  Text "Responsive corners"

Resize the viewport to compare sm and xl.

API

Props

Rounded is optional. When omitted, a component may use its own theme or built-in default.

Prop
Type
Default

No data

There are no records to display

COMPATIBILITY

Available on styled components

Layout and shell

Box, Section, Flex, Grid, AppBar, Footer, BottomBar, Sidebar, Scaffold, and Drawer.

Navigation

NavMenu, SideNav, RailNav, Tabs, and Stepper.

Content and display

Text, Title, Code, Video, Iframe, Device, Canvas, Table, Divider, Brand, Banner, Alert, Icon, Avatar, AvatarGroup, Badge, Chip, Skeleton, Card, Empty, Marquee, TypeWriter, RichText, Collapsible, Countdown, Map, Audio, Image, Accordion, Carousel, and ChatBox.

Charts

Candlestick, ArcChart, AreaChart, BarChart, LineChart, and PieChart.

Controls and forms

Input, Select, Button, IconButton, ToggleTheme, SelectTheme, Fab, Slider, Dropzone, ComboBox, CsvField, DragDrop, Editor, ImageCropper, Password, Phone, Pin, Textarea, Record, ToggleGroup, Checkbox, Color, Date, DateRange, RadioGroup, and Toggle.

Overlays

Modal, AlertDialog, Tooltip, Toast, Dropdown, and Command.

Not available on Splash, Svg, Path, or context-only entries such as Option, fabAction, comboOption, csvColumn, dragGroup, dragItem, tab, step, and region entries. Button and IconButton also accept a compatible string Signal for rounded; other components use static or responsive values.