> ## Documentation Index
> Fetch the complete documentation index at: https://snapwidget.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How do I use custom CSS to style my widget?

> Style your Pro widget with your own CSS file by adding the link to the file in the Custom Css Url setting.

Your widget shows on your website inside a frame. The CSS of your website does not reach into this frame. To change the look of the widget, you give the widget a link to your own CSS file.

> [!NOTE]
>
> Custom CSS needs a Pro widget. Pro widgets come with the Lite, Pro and Developer plans. Every paid plan starts with a 14-day free trial. See [Free and Pro widgets](/docs/getting-started/free-and-pro-widgets).

**1. Make a CSS file**

Write your CSS in a plain text file, for example `snapwidget.css`. See the example below.

**2. Upload the file**

Upload the file to your website or to another host. The link to the file must start with `https://`, and anyone must be able to open it in a browser.

**3. Add the link to your widget**

Open the widget from your [dashboard](https://snapwidget.com/dashboard). On the **Advanced** tab, paste the link to your file in **Custom Css Url**.

![A CSS file link in the Custom Css Url field](https://mintcdn.com/snapwidget/QJTE73Rcy1kqujES/images/widget-settings/custom-css/custom-css-url.jpg?fit=max\&auto=format\&n=QJTE73Rcy1kqujES\&q=85\&s=e644b66b9fca1321451beeca392df9ff)

**4. Save**

Click **Update Preview** to check your styles. Then click **Update & Get Widget** to save. You do not need to change the code on your website.

## Example

This CSS rounds the corners of each photo in a **Grid** or **Board** widget:

```css theme={null}
.media-grid .thumbnail {
  border-radius: 12px !important;
  overflow: hidden;
}
```

## Class names you can use

These classes are in **Grid** and **Board** widgets:

| Class | What it is |
| - | - |
| `.widget-container` | The box around the whole widget |
| `.media-grid` | The list of posts |
| `.media-list-item` | One post |
| `.thumbnail` | The link around each photo |
| `.caption-overlay` | The caption that shows on hover, when **Hover Effect** is **Caption** |
| `.share-overlay` | The sharing buttons on each photo |
| `.media-board-info` | The account name and caption under each post (Board only) |
| `.shoppable-button` | The button that shows on photos with [Shoppable](/docs/widget-settings/shoppable-photos) links |
| `.embed-pagination` | The arrows of **Prev/Next Controls** |

> [!TIP]
>
> The widget loads some of its own styles after your file. If a rule has no effect, add `!important` to it. To find the classes of other layouts, right-click the widget in Chrome and click **Inspect**.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.