---
title: "Border: frame an element with a line"
description: "Add a border around an element by setting its style, thickness and color side by side."
url: https://docs.vivlab.com/en/editor/style/border
---

# Border

Use **Border** to draw a line around an element. Choose the line's style, thickness and color, and the sides where it appears.

<DocsScreenshot name="editor-border-settings" alt="A solid black four-pixel border on all four sides." :width="343" :height="423" />

## Border style

The **Border style** selector offers four styles:

- **Solid**: continuous line (the most common).
- **Dotted**: small aligned dots.
- **Dashed**: small spaced dashes.
- **Double**: two parallel lines.

Until the style is chosen, the other settings stay hidden.

## Border (sides to border)

Once the style is chosen, select the sides to border (**Top**, **Right**, **Bottom**, **Left**). Click on a side to enable or disable it. You can enable one, two, three or all four sides.

This is how you create, for example, a separator at the bottom of a card (only the **Bottom** side enabled), or a full frame (all four sides).

## Border color

Standard color picker. The colors of your [theme](https://docs.vivlab.com/en/sections/themes-brands.md) appear as shortcuts.

## Border thickness

Slider between 1 and 20 pixels. A value of 1 gives a thin line, 4 a visible line, beyond that a very pronounced frame.

## Reset

The **Reset settings** button clears the border (style, color, thickness, enabled sides) in one action.