UI designer

Vue Border Editor Component

Beta

A reusable border control for real HTML, shared with the CSS button creator.

Try it

Width

3px

Style

Colour

Live border

3px solid #171717

Use in your application

vue

<script setup>
import { computed, ref } from 'vue';
import { DomBorderEditor, createDesignerBorder, borderToCss } from '@getdom/studio/vue';
const border = ref(createDesignerBorder({ width: 3 }));
const style = computed(() => ({ border: borderToCss(border.value), boxSizing: 'border-box' }));
</script>

<template>
	<DomBorderEditor v-model="border" />
	<div :style="style">Your HTML</div>
</template>

The border model

The record contains enabled, width in pixels, style (solid, dashed, dotted, double or none), and color as a CSS colour. Hiding a border preserves its settings. v-model emits a new record; change emits { border, css }. The editor copies incoming state rather than mutating your object. title defaults to Border and maxWidth defaults to 40 pixels. This control applies one border to all four sides; radius and per-side borders are separate concerns.

How styles reach your HTML

The control edits data, not a stylesheet. Bind borderToCss(border) to your element’s border style. No stage, layer ID or generated CSS class is required. In a designer, your application identifies the selected layer and passes its border record to the control. Use border-box sizing to keep the outer dimensions fixed as the border grows; the available content area gets smaller. Borders affect the box model, unlike outer box shadows.

Try borders on poster layers →