Border & Shadow Settings

Many blocks in the WordPress editor contain border settings to add a border line around your content. This guide will show you how to use these border settings.

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Border & Shadow (as shown on the right.) You can then choose the option you want to access:

• Border
• Radius
• Shadow

The Border setting allows you to add a line encompassing a block. You can choose the thickness, color and radius of the border.

To add a border to a block:

1. Select the block and open the Block Settings sidebar.
2. Locate the Border & Shadow section in the sidebar.
3. Enter an exact value or drag the slider to draw the border.
4. Optional: change the color of the border by clicking the circle to the left of the size field. Select a theme color, a default color, or set your own using the color picker.

By default, the values of the border are calculated in pixels.  Click the “px” next to the field to change to one of the other units (%, em, rem, vw, and vh.) Learn more about the different dimension setting units.

The Radius setting gives your block’s borders a rounded appearance. Setting the radius to 0 means the block has sharp edges, whereas radius of 100 means rounded edges as following:

You can get creative with your Border and Radius settings. By using the option to “Unlink Sides,” you can set the border and radius for each side of the block.

To set a custom border or radius for each side:

1. Click the Unlink Sides icon to the right of Border or Radius.
2. Set custom dimensions for each side.

You can also set different colors and styles for the Border by clicking the Border Color and Style Picker.

Available on certain blocks (including Button, Image, and Columns), the Shadow option gives your block a drop shadow behind it.

Choose from one of the following shadow effects for your element:

• Natural
• Deep
• Sharp
• Outlined
• Crisp

You can customize the default shadow effects or create your own through the Styles editor.

1. Visit your site’s dashboard.
2. Go to Appearance → Editor.
3. Select “Styles” from the left-side menu.
   • In the editor, you can also select the Styles icon in the upper right corner — the button looks like a black-and-white circle.
4. Click the “Shadows” option.
5. Click the name of the shadow you want to customize. To create a new custom shadow click the plus icon next to the “Custom” heading and then click the name of the new custom shadow.
6. In the shadow settings, you will see a preview of how the shadow looks, and the name of the shadow below. Click the name of the shadow to adjust the following settings:
   • Color: using the Color Picker chose the shadow color.
   • Outset or Inset: select whether the shadow appears outside or inside the element.
   • X position and Y position: adjust how far off the object the shadow should display.
   • Blur: how unfocused the shadow should be.
   • Spread: how large or small the shadow should appear.
7. When you’re done, click the “Save” button to save your changes.

You can reset the customizations on the borders and shadows for the block and start over. To reset the styles:

1. Click the Border & Shadow options (the three vertical dots to the right of the section header.)
2. Click Reset next to an individual setting, or click “Reset all” to reset all of the settings.

If there is no option to reset, there are no customizations to remove.