---
title: Styled Box Block
description: How to use the Styled Box block in Ultimate Blocks to add notification, feature, numbered and bordered boxes to WordPress posts and pages.
url: "https://ultimateblocks.com/docs/styled-box-block/"
updated: "2026-11-07"
category: "Content & Layout Blocks"
---

# Styled Box Block

The **Styled Box** block in Ultimate Blocks lets you put content inside a styled box to make it stand out. You can choose one of four styles: **Notification Box** for alerts and tips, **Feature Box** for features with images, **Number Box** for numbered steps, and **Bordered Box** for content inside a custom border. The block is free and has no Pro only settings.

| **Block name in the editor** | Styled Box |
| --- | --- |
| **Plan** | Free |
| **Best for** | Info, success, warning and error notices, feature highlights, numbered steps and boxed content |
| **Live demo** | [See the Styled Box block in action](https://ultimateblocks.com/styled-box-block/) |

## What you can use it for

- Show an info, success, warning or error notice inside a post.
- Highlight a tip, note or disclaimer so readers do not miss it.
- Show up to three product features side by side, each with an image, title and text.
- Explain a simple process in up to three numbered steps.
- Wrap any content (text, images, buttons) in a box with a solid, dashed or dotted border.

## How to add the Styled Box block

1. Open the post or page in the WordPress block editor.
2. Click the **+** (Block Inserter) button.
3. Search for **Styled Box** and click the block to add it.
4. Under **Select a Style**, click **Notification Box**, **Feature Box**, **Number Box** or **Bordered Box**.

![Add the Styled Box Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-the-Styled-Box-Block.png)

![All the Styled Boxes](https://ultimateblocks.com/wp-content/uploads/2023/05/All-the-Styled-Boxes.png)

You can change the style later. Select the block and open the **Select mode** dropdown in the **Settings** tab of the block sidebar. The options are **Number box**, **Notification box**, **Feature box** and **Bordered box**.

![Switch to Other Box Styles](https://ultimateblocks.com/wp-content/uploads/2023/05/Switch-to-Other-Box-Styles.jpeg)

## Notification Box

The Notification Box shows your content on a colored background with a colored line on the left. It is ideal for alerts, tips and notes. Click inside the box to type, or click the **+** inside it to add other blocks such as a list or an image.

- **Color presets:** the block toolbar has four buttons for ready made color schemes: info (blue), success (green), warning (yellow) and error (red). Click one to apply it.
- **Advanced Color Scheme** (Styles tab): set your own **Background Color**, **Foreground Color** (text color) and **Border Color** (the line on the left).

![Notification Box](https://ultimateblocks.com/wp-content/uploads/2023/05/Notification-Box.png)

## Feature Box

The Feature Box shows one to three columns. Each column has an image, a title and a short text.

- Use the column buttons in the block toolbar to choose **One column**, **Two columns** or **Three columns**.
- Click **Upload Image** in a column to add an image from your Media Library. To remove it, select the block and click the remove button on the image.
- Type the title where it says **Title goes here** and the description where it says **Text goes here**.
- Click into a title or text and use the alignment buttons in the toolbar (left, center, right, justify) to align it.

![Feature Box](https://ultimateblocks.com/wp-content/uploads/2023/05/Feature-Box.png)

## Number Box

The Number Box shows one to three numbered columns. Each column has a number, a title and a content area where you can add any blocks.

- Use the column buttons in the toolbar, or the **+** button next to the last column, to add columns (up to three).
- Click the number to change it. You can use any text, for example *01* or *A*.
- Add a title, then add text or other blocks (images, videos, lists) below it.
- **Color Scheme** (Styles tab): **Number Background Color**, **Number Color** and **Border Color**. These apply to every column.

![Number Box](https://ultimateblocks.com/wp-content/uploads/2023/05/Number-Box.jpeg)

## Bordered Box

The Bordered Box puts a border around your content. Click inside to add text or any other blocks. Its settings are in the **Border settings** panel of the **Styles** tab:

- **Border size (pixels):** the thickness of the border, from 1 to 30.
- **Border style:** solid, dashed, dotted, double, groove, ridge, inset or outset.
- **Border radius:** round the corners. The maximum is 50 when the unit is percent and 200 for pixel or em.
- **Outline radius unit:** percent, pixel or em.
- **Color Scheme:** **Border Color** and **Background Color**.

![Border Box](https://ultimateblocks.com/wp-content/uploads/2023/05/Border-Box.png)

![Border Box](https://ultimateblocks.com/wp-content/uploads/2023/05/Border-Style-of-the-Border-Box-1024x531.jpeg)

![Colorize the Border Box](https://ultimateblocks.com/wp-content/uploads/2023/05/Colorize-the-Border-Box.png)

**Tip:** For a soft card look, use a 1 pixel solid border, a light gray Border Color, a white Background Color and a Border radius of 8 pixels.

## Settings tab

The **Settings** tab (gear icon) has the **Select mode** dropdown, which switches the box between the four styles. When you switch, your content is moved to the new style where possible, so check the result before you save.

## Styles tab

The **Styles** tab (half-circle icon) shows the color and border options of the current style (see the sections above), plus:

- **Dimension Settings:** **Padding** (space inside the box) and **Margin** (space around the box).

## Extensions you can use with this block

- [Visibility Control](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule.
- [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view.
- [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile.
- [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only.
- [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (Pro): save your design and reuse it on other posts.

## Frequently asked questions

**How do I add a notice or alert box in WordPress?**

Add the Styled Box block from Ultimate Blocks and choose Notification Box. Then click the info, success, warning or error button in the block toolbar to set the colors.

**Can I add images or lists inside a Styled Box?**

Yes. The Notification Box, Bordered Box and each Number Box column accept any blocks, so you can add images, lists, buttons and more. The Feature Box has one image, a title and text per column.

**How many columns can a Feature Box or Number Box have?**

Up to three. Use the column buttons in the block toolbar to switch between one, two and three columns.

**Can I change the style of a box after I add it?**

Yes. Select the block and choose another style in the Select mode dropdown in the Settings tab.

**Can I make a box with rounded corners?**

Yes. Choose Bordered Box and set Border radius and Outline radius unit in the Border settings panel of the Styles tab.

**Is the Styled Box block free?**

Yes. All four styles and their settings are part of the free Ultimate Blocks plugin.

## Related docs

- [Styled List block](https://ultimateblocks.com/docs/styled-list-block/)
- [Call To Action block](https://ultimateblocks.com/docs/call-to-action-block/)
- [Expand block](https://ultimateblocks.com/docs/expand-block/)
- [Heading (UB) block](https://ultimateblocks.com/docs/advanced-heading-block/)
- [What is Ultimate Blocks?](https://ultimateblocks.com/docs/what-is-ultimate-blocks/)