Style an image

Add styles like filters, margins, borders, and shadows to an image. This guide covers how to style an image on your site.

In this video, you’ll learn how to style an image on your WordPress.com site using the Image block. It walks through applying filters, borders, and shadows.

Follow these steps to style an image on your site:

1. Start at your WordPress.com dashboard.
2. Edit the page, post, or template where you added the image. 
3. Click the image you want to style.
4. Open the sidebar Settings by clicking the “Settings” icon in the top toolbar.

If you do not have the sidebar on the right, click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

5. Click the “Styles” tab (the icon looks like a black and white circle):

6. Adjust any of the following styles:
   • Image style: choose between default, or rounded. When rounded, a square image will be a perfect circle while a rectangle image will be an oblong shape.
   • Filters: Add a two-tone color effect using the Duotone filter setting.
   • Image dimensions: Add space around the image using the Dimensions settings.
   • Aspect ratio: Change an image’s aspect ratio and how it appears within the block using the Aspect ratio settings.
   • Border & shadow: Set a border, radius, and shadow for your image using the Border & Shadow settings.

You can create a CSS class to customize its appearance with CSS code.

1. Start at your WordPress.com dashboard.
2. Edit the page, post, or template where you added the image. 
3. Click the image you want to style.
4. Open the sidebar settings by clicking the “Settings” icon in the top toolbar.

If you do not have the sidebar on the right, click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

5. Open the “Advanced” settings at the bottom of the sidebar.
6. Add or modify the Additional CSS class(es).
7. Save your changes and preview the page, post, or template to see the applied CSS.

Image styles include filters, dimensions, borders, and shadows. Follow these steps to reset a single image style or reset all styles on the image.

1. Click on the image you want to edit.
2. Open the sidebar settings by clicking the “Settings” icon in the top toolbar.
3. Click the “Styles” icon.
4. Open the “Options” menu next to each style section by clicking the three dots (⋮) to the right of the section header.
5. Click the “Reset” option next to each setting that you want to reset. Or, click “Reset all” to reset all settings customizations.
   • If “Reset” is not an option, there are no styles to reset.