# Border Control in Page Builder > Learn how to use Border Control in GHL Customer Care Page Builder to customize border color, width, sides, styles, and corner radius for supported elements. - Source: https://docs.ghlcustomercare.com/docs/sites/funnel-and-website-builder/border-control-in-page-builder - Section: Sites / Funnel & Website Builder - Reading time: 3 min - Images: 6, each explained below --- Border Control in the Page Builder gives you more flexibility when styling supported elements in Funnels and Websites. You can adjust border width by side, customize corner radius values and choose from various border styles. --- **TABLE OF CONTENTS** - [What is Border Control in Page Builder?](#what-is-border-control-in-page-builder) - [Key Benefits of Border Control in Page Builder](#key-benefits-of-border-control-in-page-builder) - [Border Settings Options](#border-settings-options) - [How To Setup Border Control in Page Builder](#how-to-setup-border-control-in-page-builder) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What is Border Control in Page Builder?** Border Control lets you customize how borders appear on supported Page Builder elements from one centralized panel. This includes commonly used elements like buttons, images, and videos. You can adjust border style, color, side-specific width, and corner radius to create anything from subtle accents to more defined visual frames. This makes it easier to build polished, consistent designs without relying on manual workarounds. --- ## **Key Benefits of Border Control in Page Builder** - **More Precise Customization:** Adjust border settings with greater control to match the exact look you want for each element. - **Independent Side Styling:** Set different border widths on each side to create accents, dividers, or more custom framing effects. - **Custom Corner Shaping:** Apply different corner radius values to create softer layouts or more distinctive shapes. - **More Visual Variety:** Use additional border styles like double, groove, ridge, inset, and outset to add depth and design variation. --- ## **Border Settings Options** The border panel brings the most important border controls into one place, so you can style supported elements faster and with fewer manual workarounds. Understanding what each setting changes visually makes it easier to build the exact shape or framing effect you want. Border Control is available for supported Page Builder elements, including Button, Image Video Note: Supported elements can vary by builder context and feature rollout. - **Border Style:** Changes the visual appearance of the border. - **Border Color:** Sets the color used for the border. - **Border Sides:** Lets you apply one width value to all sides or unlink the values to control the top, right, bottom, and left borders separately. - **Corner Radius:** Adjust the roundness of corners with one shared value or unlink the values to round each corner independently. --- ## **How To Setup Border Control in Page Builder** 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). ![Step 1 of 6: From within a Funnel or Website in Page Builder, select a supported…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069743141/original/NKkyzcaCpYJQOrEFQxoXbfCE5gkMHhOICA.png) **Step 1 of 6: From within a Funnel or Website in Page Builder, select a supported…** This screenshot accompanies step 1 of 6 in the "How To Setup Border Control in Page Builder" section of "Border Control in Page Builder". At this point in the walkthrough you from within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). The next step is to in the right-hand sidebar, open the Styles tab then scroll to the Border panel. - What to choose: From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). - Controls: Styles, Border, Border Style, Border Color, Border Sides, Corner Radius, Save, P, ublish - Next: In the right-hand sidebar, open the Styles tab then scroll to the Border panel. Full procedure: 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). <- this image 2. In the right-hand sidebar, open the Styles tab then scroll to the Border panel. 3. Select a Border Style and Border Color. 4. Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. 5. Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. 6. Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. 2. In the right-hand sidebar, open the **Styles** tab then scroll to the **Border** panel. ![Step 2 of 6: In the right-hand sidebar, open the Styles tab then scroll to the…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069743251/original/LWqsqEGJtWl9hmG0rOFzWVCkujudgrjAJQ.png) **Step 2 of 6: In the right-hand sidebar, open the Styles tab then scroll to the…** This screenshot accompanies step 2 of 6 in the "How To Setup Border Control in Page Builder" section of "Border Control in Page Builder". At this point in the walkthrough you in the right-hand sidebar, open the Styles tab then scroll to the Border panel. The next step is to select a Border Style and Border Color. - Where to go: In the right-hand sidebar, open the Styles tab then scroll to the Border panel. - Controls: Styles, Border, Border Style, Border Color, Border Sides, Corner Radius, Save, P, ublish - Next: Select a Border Style and Border Color. Full procedure: 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). 2. In the right-hand sidebar, open the Styles tab then scroll to the Border panel. <- this image 3. Select a Border Style and Border Color. 4. Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. 5. Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. 6. Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. 3. Select a **Border Style** and **Border Color**. ![Step 3 of 6: Select a Border Style and Border Color](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069743214/original/txATlywYhzjQ_NvKtpH1R5tHcRvQU_4bxw.png) **Step 3 of 6: Select a Border Style and Border Color** This screenshot accompanies step 3 of 6 in the "How To Setup Border Control in Page Builder" section of "Border Control in Page Builder". At this point in the walkthrough you select a Border Style and Border Color. For context, this section explains: From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). In the right-hand sidebar, open the Styles tab then scroll to the Border panel. Select a Border Style and Border Color. Set your Border Sides values. Leave the values…. The next step is to set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. - What to choose: Select a Border Style and Border Color. - Controls: Border Style, Border Color, Styles, Border, Border Sides, Corner Radius, Save, P, ublish - Next: Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. Full procedure: 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). 2. In the right-hand sidebar, open the Styles tab then scroll to the Border panel. 3. Select a Border Style and Border Color. <- this image 4. Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. 5. Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. 6. Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. 4. Set your **Border Sides** values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. ![Step 4 of 6: Set your Border Sides values. Leave the values linked to use the same…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069743290/original/VAqszYxcEVdH6rMn6PgEwCcsXx5xobgjog.png) **Step 4 of 6: Set your Border Sides values. Leave the values linked to use the same…** This screenshot accompanies step 4 of 6 in the "How To Setup Border Control in Page Builder" section of "Border Control in Page Builder". At this point in the walkthrough you set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. The next step is to set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. - What this covers: Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. - Controls: Border Sides, Styles, Border, Border Style, Border Color, Corner Radius, Save, P, ublish - Next: Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. Full procedure: 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). 2. In the right-hand sidebar, open the Styles tab then scroll to the Border panel. 3. Select a Border Style and Border Color. 4. Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. <- this image 5. Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. 6. Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. 5. Set your **Corner Radius** values. Leave the values linked to round all corners equally or unlink them to round each corner independently. ![Step 5 of 6: Set your Corner Radius values. Leave the values linked to round all…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069743322/original/GBmOsgHph3u6C_HfYrKCKODaXYOWE06fyA.png) **Step 5 of 6: Set your Corner Radius values. Leave the values linked to round all…** This screenshot accompanies step 5 of 6 in the "How To Setup Border Control in Page Builder" section of "Border Control in Page Builder". At this point in the walkthrough you set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. The next step is to preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. - What this covers: Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. - Controls: Corner Radius, Styles, Border, Border Style, Border Color, Border Sides, Save, P, ublish - Next: Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. Full procedure: 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). 2. In the right-hand sidebar, open the Styles tab then scroll to the Border panel. 3. Select a Border Style and Border Color. 4. Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. 5. Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. <- this image 6. Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. 6. Preview the element in the canvas and fine-tune the values as needed. **Save** and **P****ublish** your changes when you are ready. ![Step 6 of 6: Preview the element in the canvas and fine-tune the values as needed…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069743352/original/mAKuEQj695o5IT2elIDMtjFA6cR4efHPoQ.png) **Step 6 of 6: Preview the element in the canvas and fine-tune the values as needed…** This screenshot accompanies step 6 of 6 in the "How To Setup Border Control in Page Builder" section of "Border Control in Page Builder". At this point in the walkthrough you preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. - How to confirm: Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. - Controls: Save, P, ublish, Styles, Border, Border Style, Border Color, Border Sides, Corner Radius Full procedure: 1. From within a Funnel or Website in Page Builder, select a supported element (for example, a Button, Image, or Video element). 2. In the right-hand sidebar, open the Styles tab then scroll to the Border panel. 3. Select a Border Style and Border Color. 4. Set your Border Sides values. Leave the values linked to use the same width on all sides or unlink them to set each side individually. 5. Set your Corner Radius values. Leave the values linked to round all corners equally or unlink them to round each corner independently. 6. Preview the element in the canvas and fine-tune the values as needed. Save and P ublish your changes when you are ready. <- this image --- ## **Frequently Asked Questions** **Q: Can I edit each side of the border separately?** Yes. Use the link icon in **Border Sides** to switch from one shared value to individual values for each side. **Q: Will this affect my existing pages?** No. Existing pages that use older border settings continue to work normally. **Q: Is Border Control available in both Funnels and Websites?** Border Control is available across Funnels and Websites. **Q: Can I edit each corner radius separately?** Yes. Use the link icon in **Corner Radius** to unlink the values and customize each corner independently. --- ## **Related Articles** - [Height & Width Controls for Page Builder Elements](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/height-width-controls-for-page-builder-elements) - [Gradients and Background Blur in the Page Builder](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/gradients-and-background-blur-in-the-page-builder) - [Websites Overview](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com