{"id":16071578,"date":"2022-10-06T10:16:34","date_gmt":"2022-10-06T10:16:34","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=16071578"},"modified":"2025-04-17T07:36:57","modified_gmt":"2025-04-17T07:36:57","slug":"border-settings-overview","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/","title":{"rendered":"Border & Shadow Settings overview"},"content":{"rendered":"\n

You can use the border and shadow settings in your block<\/a> to set a visible border or shadow 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.<\/p>\n\n\n\n

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

<\/div>\n\n\n\n
\n
\n

How to access border and shadow settings<\/h2>\n\n\n\n

The border and shadow settings can be found in the Block Settings sidebar of a block<\/a> under the section Border<\/strong>.<\/p>\n\n\n\n

If you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor.<\/p>\n\n\n\n

In the Border & Shadow<\/strong> section, shadow option may be hidden. Click on the three-dot border options menu (also known as an ellipsis) to explore all the border and shadow settings that are not visible by default.<\/p>\n\n\n\n

You can read more about block settings here.<\/a><\/p>\n<\/div>\n\n\n\n

\n
\"Border
Screenshot<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Type of settings <\/h2>\n\n\n\n

Each supported block comes with different border and shadow 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<\/strong> as shown in this article<\/a>. This resets the settings and removes all of your changes. Note that not every block supports all the border settings.<\/p>\n\n\n\n

Width <\/h3>\n\n\n\n
\n
\n

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.<\/p>\n<\/div>\n\n\n\n

\n
\"Adding<\/figure>\n<\/div>\n<\/div>\n\n\n\n

You can click on the Link<\/strong> icon to unlink the sides and set separate values for the border width for the top, left, right and bottom.<\/p>\n\n\n\n

\"Setting<\/figure>\n\n\n\n

You can choose to set border width using different units. Click the px<\/code> icon to change the unit of measurement for the border thickness or radius. You can choose between px<\/code>, %<\/code>, em<\/code>, rem<\/code>, vw<\/code>, and vh<\/code>.<\/p>\n\n\n\n

Read more about what each of these units means.<\/a><\/p>\n\n\n\n

\"Changing<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Color<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Changing<\/figure>\n\n\n\n

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 <\/strong>button at the bottom of the color picker. This resets the settings and removes all of your changes.<\/p>\n\n\n\n

\"Reset<\/figure>\n\n\n\n

Style<\/h3>\n\n\n\n

From the color picker, you can also select one of the three border styles: straight line, dash line, and dotted line.  <\/p>\n\n\n\n

\"Changing<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Radius <\/h3>\n\n\n\n

The radius setting will give your block a more rounded border. Setting this to 0 means the block has sharp edges. <\/p>\n\n\n\n

You can choose to set a border radius using different units. Click the px<\/code> icon to change the unit of measurement for the radius. You can choose between px<\/code>, %<\/code>, em<\/code>, rem<\/code>, vw<\/code>, and vh<\/code>.<\/p>\n\n\n\n

Read more about what each of these units means.<\/a><\/p>\n\n\n\n

You can type in a value in the text box or use the slider to adjust the value.<\/p>\n\n\n\n

You can click on the Link<\/strong> 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.<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

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:<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

Shadow<\/h3>\n\n\n\n

The shadow setting will give your block a shadow effect behind it.<\/p>\n\n\n\n

Tips: If you don’t see the shadow option in the Border & Shadow section, click the three vertical dots to the right of the section header and select Shadow option.<\/p>\n\n\n\n


Click Drop shadow and select shadow effects.<\/p>\n\n\n\n

\"Shadow<\/figure>\n\n\n\n

Demonstration <\/h2>\n\n\n\n

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\u2019s an example showing how a theme author can customize a featured image block to make it stand out even more: <\/p>\n\n\n\n

\n

Changelog <\/h2>\n\n\n\n