邊框

使用邊框工具快速設定元素的邊框和邊框圓角樣式。非常適合圖片、按鈕或任何其他元素。

邊框

使用邊框工具新增或移除元素的邊框。可以選擇全部邊框或一次一個邊框。

加入型

<Box sx={{ border: 1 }}>…
<Box sx={{ borderTop: 1 }}>…
<Box sx={{ borderRight: 1 }}>…
<Box sx={{ borderBottom: 1 }}>…
<Box sx={{ borderLeft: 1 }}>…

移除型

<Box sx={{ border: 0 }}>…
<Box sx={{ borderTop: 0 }}>…
<Box sx={{ borderRight: 0 }}>…
<Box sx={{ borderBottom: 0 }}>…
<Box sx={{ borderLeft: 0 }}>…

邊框顏色

<Box sx={{ borderColor: 'primary.main' }}>…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box sx={{ borderColor: 'error.main' }}>…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box sx={{ borderColor: 'text.primary' }}>…

邊框圓角

<Box sx={{ borderRadius: '50%' }}>…
<Box sx={{ borderRadius: 1 }}>… // theme.shape.borderRadius * 1
<Box sx={{ borderRadius: '16px' }}>…

API

import { borders } from '@mui/system';

匯入名稱	Prop	CSS 屬性	主題鍵
`border`	`border`	`border`	`borders`
`borderTop`	`borderTop`	`border-top`	`borders`
`borderLeft`	`borderLeft`	`border-left`	`borders`
`borderRight`	`borderRight`	`border-right`	`borders`
`borderBottom`	`borderBottom`	`border-bottom`	`borders`
`borderColor`	`borderColor`	`border-color`	`palette`
`borderTopColor`	`borderTopColor`	`border-top-color`	`palette`
`borderRightColor`	`borderRightColor`	`border-right-color`	`palette`
`borderBottomColor`	`borderBottomColor`	`border-bottom-color`	`palette`
`borderLeftColor`	`borderLeftColor`	`border-left-color`	`palette`
`borderRadius`	`borderRadius`	`border-radius`	`shape`