STYLES

Border

Define portable border thickness and tint it with a semantic family from the active theme.

WIDTH SCALE

Four border weights

Border accepts integer values from 1 through 4 and preserves their visual progression on every target.

1

2

3

4

SEMANTIC COLORS

Eight theme families

borderColor resolves through the active theme instead of embedding a platform-specific color.

Primary

Secondary

Tertiary

Muted

Success

Info

Warning

Danger

COMPOSITION

Combine thickness, color, and radius

Border controls thickness, borderColor chooses the theme family, and rounded shapes the corners.

dowe
Card border:2 borderColor:"success" rounded:"lg" p:6
  Text "Validated surface"

Validated surface

All three props are normalized before target generation.

RESPONSIVE

Increase emphasis on wider screens

Border thickness accepts the same responsive breakpoint object used by other common visual props.

dowe
Box border:{ xs:1 md:4 } borderColor:"tertiary" rounded:"md" p:6
  Text "Responsive border"

Resize the viewport to compare border 1 and border 4.

API

Props

borderColor alone does not draw a border. Declare border whenever the outline must be visible.

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.