Density

Border

Set data-dn-border on a surface to use Density’s layout-safe inset border. It accepts none or border; omit it when the element has no border.

Border values

none
border
import { View } from "density-base-ui";

export default function BorderExample() {
  return (
    <View align="start" gap="sm" padding={false}>
      <div data-dn-border="none" data-dn-depth="1" style={{ padding: "12px" }}>
        none
      </div>
      <div
        data-dn-border="border"
        data-dn-depth="1"
        style={{ padding: "12px" }}
      >
        border
      </div>
    </View>
  );
}

Use data-dn-border="border" for standard surface outlines. Do not write custom surface borders when this attribute expresses the intended treatment.