Border Settings overview

You can use the border settings in your block to set a visible border on specific blocks. These settings allow you to control the width and radius on each side of the border. Some blocks also have the option to change the border color.

The border settings are available when you use the block editor. If you are new to the block editor, this guide will show you how to work with blocks. You can read more about the new block editor features and improvements in this article.

Type of settings

Each supported block comes with different border settings. If you make customizations to these settings and want to revert back to the original settings quickly, you can do so by selecting the three-dot menu icon and clicking Reset All as shown in this article. This resets the settings and removes all of your changes. Note that not every block supports all the border settings.

Width

The width setting allows you to define the width of the border on the four sides.

You can type in a value in the text box or use the slider to adjust the value.

You can click on the Link icon to unlink the sides and set separate values for the border width for the top, left, right and bottom.

You can choose to set border width using different units. Click the PX icon to change the unit of measurement for the border thickness or radius. You can choose between PX, %, EM, REM, VW, and VH.

Read more about what each of these units means.

Color

The border color for your block can be set using the style picker next to the border width as seen below. You can the colors from the theme palette or from the default colors in the theme.

If you make customizations to these settings and want to revert back to the original settings quickly, you can do so by selecting the Reset to default button at the bottom of the color picker. This resets the settings and removes all of your changes.

Style

From the color picker, you can also select one of the three border styles: straight line, dash line, and dotted line.  

Radius

The radius setting will give your block a more rounded border. Setting this to 0 means the block has sharp edges.

You can choose to set a border radius using different units. Click the PX icon to change the unit of measurement for the radius. You can choose between PX, %, EM, REM, VW, and VH.

Read more about what each of these units means.

You can type in a value in the text box or use the slider to adjust the value.

You can click on the Link icon to unlink the radii and set separate values for the four corners. Below is an example of how you can have unlinked values to create a block with uneven round corners.

Note that when you unlink the radii, hover over the radii text boxes to display a tooltip that shows which corner each of the four text boxes relates to as shown below:

Blocks that include border settings

• Avatar
• Button
• Code
• Column/Columns
• Comments Title
• Group
• Image
• Post Featured Image
• Pullquote
• Read More
• Search
• Table

Demonstration

This powerful set of tools allows for some neat ways to decorate everything from individual images to overall columns of content. To see how borders can transform a block, here’s an example showing how a theme author can customize a featured image block to make it stand out even more: