How to add borders, rounded corners and shadows

In TeleportHQ, you add a border, rounded corners and a shadow from three sections of the right panel: Border, Radius and Shadow. Select the element, click + in the section, then adjust the values. For example, a product card with a thin grey border, 12px rounded corners and a soft shadow.

Before you start#

• Border, Radius and Shadow are available on every plan, for most elements.
• Styles apply to the screen size selected at the top of the canvas and all smaller ones. Pick your largest screen size first.

Where the sections are#

In the TeleportHQ right panel, the three sections sit next to each other in the Visual tab, after Background:

1. Border: color, width and style of the outline.
2. Radius: how round the corners are.
3. Shadow: one or more drop shadows.

Add a border#

1. On the canvas, click the element, for example a product card.
2. In the right panel, open the Visual tab.
3. In Border, click +. A 1px border in your default text color is added.
4. In Color, pick a color, for example #E5E5E5, or a saved color.
5. In Width, type a width, for example 2px.
6. In Style, pick a style, for example dashed.

To give each side its own width, click the toggle next to Width (tooltip Independent borders) and fill in the four sides.

Round the corners#

1. Select the element.
2. In Radius, click +. A small radius is added: 4px, or a saved radius from your project.
3. In Radius, type a value, for example 12px, or pick a saved radius from the list.

To round only some corners, click the toggle (tooltip Independent corners) and fill in each corner. For example, 12px on the two top corners and 0px on the bottom ones. To make a square image a circle, use 50% (in new projects, the saved value Round).

Add a shadow#

1. Select the element.
2. In Shadow, click +. A light grey shadow is added.
3. Set the shadow values. Type numbers only: they are in pixels.
   • X: how far right the shadow moves, for example 0.
   • Y: how far down it moves, for example 8.
   • Blur: how soft it is, for example 24.
   • Spread: how much bigger than the element it is, for example 0.
4. Click the swatch and pick a color. For a soft shadow, use black with low transparency, for example 15%.

Click + again to stack another shadow. Click the trash icon to remove one.

Check that it worked#

The element on the canvas shows the border, rounded corners and shadow. Switch to a smaller screen size to check they still look right.

Troubleshooting#

The + button is greyed out The section has values set at a larger screen size. Switch to that screen size to change them, or edit the fields directly here to override them.

The values show in grey The border, radius or shadow comes from a CSS class or a larger screen size. Type a value to override it on this element, or edit the class to change every element that uses it. See How the style panel works.

I removed the border, but the element still has 0px or "none" When the border comes from a CSS class or a larger screen size, − sets it to zero or "none" instead of deleting it, so the element has no border here. Remove the border from the class or larger screen size to delete it everywhere.

My image corners aren't rounded Select the image itself, not the container around it. If the container is rounded but the image isn't, set Overflow to hidden in the container's Size section.

I want an inner (inset) shadow The Shadow section has no inset option. Add it in the Advanced tab, for example box-shadow with the value inset 0 2px 6px rgba(0,0,0,0.2). See How to write CSS directly (Advanced tab).

Clicking the Shadow title doesn't open Reset Values Hold Alt (Option on Mac) and click the Shadow title to reset the shadows for this screen size.

Good to know#

• Border width has no saved values. Radius does: see How to create reusable sizes, spacing and corner radius.
• For a shadow on text, use Text Shadow in the Text Style section. See How to change font, size and text color.
• With several elements selected that have different shadows, the Shadow + button is greyed out.
• Editing one border field on an element that has a combined border value splits it into separate width, style and color values. The look doesn't change.