# Embellishing images in CMS blocks

ThemeWare® offers various CSS decoration classes for images in CMS blocks. This instruction page will introduce all CSS classes to you.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FfDc5xeQk5wo4Gh2NYdwL%2Fimage.png?alt=media&#x26;token=e4bbf90a-3433-4417-ab7d-942845141a4f" alt=""><figcaption><p>Right: Decoration class "twt-cms-image-border-semi"</p></figcaption></figure>

{% hint style="success" %}
**Tip**: You can find application examples in our [demoshops](https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-styling/Embellishing-images-in-CMS-blocks-with-decoration-classes/).
{% endhint %}

***

## ThemeWare® CSS decoration classes for images

### Border

Adds a 12px thick border to images in a CMS block.

**CSS classes**

| Class                                                        | Block/Section | Description                                                          |
| ------------------------------------------------------------ | ------------- | -------------------------------------------------------------------- |
| **twt-cms-image-border** bzw. **twt-cms-image-border-solid** | Block         | Adds a 12px thick border to images in a CMS block.                   |
| **twt-cms-image-border-semi**                                | Block         | Adds a 12px thick, semi-transparent border to images in a CMS block. |

{% hint style="info" %}
**Note**: How to insert the CSS classes you will learn in our article [themeware-css-classes-for-shopping-experiences](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences "mention").
{% endhint %}

**Example**

![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-9793c62ad66497477e82a554474a29a5aaf19adb%2Fcms-block--image-decoration%20\(1\)%20\(1\)%20\(1\).png?alt=media)

### Shadow (Bootstrap)

Adds a drop shadow to images in a CMS block.

**CSS classes**

| Class                           | Block/Section | Description                                             |
| ------------------------------- | ------------- | ------------------------------------------------------- |
| **twt-cms-image-box-shadow-sm** | Block         | Adds a subtle drop shadow to images in a CMS block.     |
| **twt-cms-image-box-shadow**    | Block         | Adds a drop shadow to images in a CMS block.            |
| **twt-cms-image-box-shadow-lg** | Block         | Adds a noticeable drop shadow to images in a CMS block. |

**Example**

![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-fb37f0a7f2ed4389afed1e1e871ebd7b7fecd3fe%2Fimage-decoration--css-shadows-1%20\(1\).png?alt=media)

### Shadow (ThemeWare®)

Adds a drop shadow to images in a CMS Block.

**CSS Classes**

| Class                                | Block/Section | Description                                  |
| ------------------------------------ | ------------- | -------------------------------------------- |
| **twt-cms-image-box-shadow-level-1** | Block         | Adds a drop shadow to images in a CMS block. |
| **twt-cms-image-box-shadow-level-2** | Block         | Adds a drop shadow to images in a CMS block. |
| **twt-cms-image-box-shadow-level-3** | Block         | Adds a drop shadow to images in a CMS block. |
| **twt-cms-image-box-shadow-level-4** | Block         | Adds a drop shadow to images in a CMS block. |
| **twt-cms-image-box-shadow-level-5** | Block         | Adds a drop shadow to images in a CMS block. |

**Example**

![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-43e0777ea473088cc0a6ea4f448ba0ecdcff6f5c%2Fimage-decoration--css-shadows-2.png?alt=media)

### Border radius

Rounds off images in a CMS block.

**CSS classes**

| Class                     | Block/Section | Description                       |
| ------------------------- | ------------- | --------------------------------- |
| **twt-cms-image-rounded** | Block         | Rounds off images in a CMS block. |

**Example**

![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-67d5e609000e152386fa53c577e7b59e4befd1cb%2Fimage-decoration--css-border-radius.png?alt=media)

{% hint style="info" %}
**Note**: You can activate or deactivate the ThemeWare® "CSS box shadow classes" and "CSS box shadow classes" as required. You can find the configuration in the Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes".
{% endhint %}