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.

In this guide

1. Access the Border & Shadow Settings
2. Add a Border
   1. Adjust Border Radius
   2. Advanced Border Settings
3. Add a Drop Shadow
4. Reset Border & Shadow

Access the Border & Shadow Settings

Border & Shadow settings are available for:

• Blocks – change the effects of specific elements.
• Styles – change the effects for specific elements used throughout your entire site at once.

When you select a block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

Click the Settings icon to open the block settings

In most cases, the Border & Shadow section will be under the Styles tab in the Block Settings sidebar. Otherwise, the section will be in the main area of the Block Settings sidebar.

To access the Border & Shadow section:

1. Click on the block you want to add styles to.
2. Click the Styles icon in the Block Settings sidebar.
3. Scroll to the Border & Shadow section.

You can use the Border & Shadow options (the three vertical dots to the right of the section header) to reveal the Shadow option.

Use Border & Shadow options to activate the Shadow option.

An example of border and shadow settings in the Image block

Add a Border

The Border setting allows you to add a colored line along the edges of a block.

To add a border, click and drag the slider to the desired width. You can also type a size in the box to the left of the slider and select from a range of units – px, %, em, rem, vw, and vh. Learn more about the different dimension setting units.

Click on the leftmost circle to change the color and style of your border.

Video showing how to add a border to an image block.

Adjust Border Radius

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:

An Image block with rounded borders

Advanced Border Settings

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.

Example of a custom border and radius to create a unique effect.

Add a Drop Shadow

Available on certain blocks, the Shadow option gives your block a drop shadow behind it.

An example of a button in a Buttons Block with a drop shadow applied.

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

• Natural
• Deep
• Sharp
• Outlined
• Crisp

Reset Border & Shadow

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.

The options to reset the Border & Shadow customizations.