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

# Customize block background settings

> Learn to change the background color, add and adjust a border, and add depth to your block.

Learn to change the background color, add and adjust a border, and add depth to your Block.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/rgti8v7l8m" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

This article refers to the Block Background Settings. If you are looking to customize your Section Background Settings, please refer to the [Section Background Settings guide](/articles/website/pages/how-to-customize-your-section-background-settings). Learn more about the [difference between sections and blocks](/articles/website/pages/add-sections-to-your-pages).

***

## Customizing your block background settings

Customize your Block Background Settings with a [Block Background Color](#block-background-color), [Border](#border-type), and/or a [Box Shadow effect](#box-shadow).

### To enable your block background settings

* Open the **Website** tab from the Dashboard.
* Select either **Website Pages** or **Landing Pages**.
* Open the page editor for your Page. [Learn more](/articles/website/pages/how-to-get-to-the-page-editor)
* Click open the Block you wish to customize.
* Navigate to the sidebar and click **Background**.
* Select your **Border Type** and customize your Background Settings:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/2qznulilha" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Background settings

### Block background color

Select the background color for your Block with the color picker:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/5azaptltzx" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Tip>
  **Tip:** Use the Opacity Slider in the Color Picker to adjust the opacity of the Block Background Color.
</Tip>

### Border type

Select the Border Type to change the appearance of your Border:

* None
* Solid
* Dotted
* Dashed
* Double
* Ridge

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/qo2zxbxd5r" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Border width

Configure the width of your Border and adjust its thickness:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/1311yod6c0" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Border color

Customize the color of your Border to fit your page and branding:

<img src="https://mintcdn.com/kajabi-support/0SrqXIvQyuWTYRde/articles/images/d73c1a90_16799637673499.png?fit=max&auto=format&n=0SrqXIvQyuWTYRde&q=85&s=9859a6ba2c2d68287fc92bf8d5450b0e" alt="Border Color Settings" width="1638" height="902" data-path="articles/images/d73c1a90_16799637673499.png" />

<Tip>
  **Tip:** Test the different Background settings and create unique designs and shapes by configuring the Block Background color, Border color, and Border type!
</Tip>

### Border radius

Adjust the border shape of the Block to appear more rounded or squared with the Border Radius slider:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/1dn9t9lwni" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Box shadow

Add depth to your block by selecting a Box Shadow Effect:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/4cjl6x5h8b" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>