Luna UI Documentation

Example

html

<!-- Set border width, radius and color -->
<engine:VisualElement class="border-8 rounded-lg border-red-400"/>

Border Width

Format: border-{value}

Class	Properties
border-0	border-width: 0
border-1	border-width: 1px
border-2	border-width: 2px
border-4	border-width: 4px
border-8	border-width: 8px
border-12	border-width: 12px
border-16	border-width: 16px

Border Radius

Format: rounded-{value}

Class	Properties
rounded-none	border-radius: 0
rounded-sm	border-radius: 2px
rounded	border-radius: 4px
rounded-md	border-radius: 6px
rounded-lg	border-radius: 8px
rounded-xl	border-radius: 12px
rounded-2xl	border-radius: 16px
rounded-3xl	border-radius: 24px
rounded-full	border-radius: 9999px

Border Color

Format: border-{color}-{tone}

html

<engine:VisualElement class="border-purple-700" />
<engine:VisualElement class="border-red-500" />
<engine:VisualElement class="border-red-500-half" />