# Custom CSS for Cookie Banners | Secure Privacy Guide > Style your Secure Privacy cookie banner with custom CSS. Learn how to target inner banner elements and the outer wrapper container using the SP-OUTER-START syntax — with examples and fixes. - Canonical: https://support.secureprivacy.ai/article/customizing-secure-privacy-cookie-banners-with-css - Product: Consent Management - Category: Customization - Published: 2026-03-06T12:43:00+00:00 - Updated: 2026-03-23T22:53:00.931+00:00 - Reading time: 4 minutes --- **Summary:** This guide explains how to apply **custom CSS to your Secure Privacy cookie banner**—both inside the banner iframe and to its outer wrapper container. Whether you want to adjust padding, button styles, text colors, positioning, or shadows, this walkthrough covers the correct approach for each scope, including the `/SP-OUTER-START/` and `/SP-OUTER-END/` syntax for outer container styling. ## Who Is This Guide For? - **Website administrators and designers** customizing the visual appearance of their Secure Privacy cookie banner - **Developers** applying CSS to fine-tune banner styles beyond the visual editor's options - **Marketers and compliance managers** maintaining brand consistency across their consent UI ## How to Apply Custom CSS to Your Secure Privacy Cookie Banner ### 1\. Styling Elements Inside the Banner (iframe CSS) - In your Secure Privacy dashboard, navigate to **Design > Cookie Banner**. You will find a **Custom CSS input field** located directly below the banner preview on the design page. ![Secure Privacy design page showing the Custom CSS input field below the cookie banner preview](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/d5d2fba39832f6af2874-851c561c5de1.webp) The Custom CSS field in Secure Privacy's design editor — located below the banner preview panel. - CSS entered here is applied **within the banner's iframe**. This means it can target and style inner banner elements such as padding, text colors, typography, and button styles — but it is scoped to the banner only and will not affect the rest of your website. ![Example of custom CSS applied inside a Secure Privacy cookie banner iframe, targeting button and text elements](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/565eaa7e1c88d3cb86ef-f8b7af34b137.webp) Inner banner CSS is scoped to the iframe — safely targeting banner elements without affecting the rest of your page. ### 2\. Styling the Banner Outer Wrapper Container - To style the banner's **outer container**—such as its position, box shadow, margin, or z-index—wrap your CSS rules between the following special comment tags in the same Custom CSS field: ``` /*SP-OUTER-START*/ /* Your CSS code for the outer wrapper goes here */ /*SP-OUTER-END*/ ``` ![Secure Privacy Custom CSS field showing the SP-OUTER-START and SP-OUTER-END comment tags wrapping outer wrapper CSS rules](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/ecff10d495766eeb3666-430bb9fa59d2.webp) Wrap outer container CSS between `/*SP-OUTER-START*/` and `/*SP-OUTER-END*/` in the Custom CSS field. - CSS placed between these tags is **injected directly into your website's HTML**, outside the iframe, and targets the banner's outer container element. This makes it suitable for layout-level properties like positioning and shadows. ## Important: Risks of Outer Wrapper CSS **⚠️ Use with caution:** Because CSS placed between `/*SP-OUTER-START*/` and `/*SP-OUTER-END*/` is injected directly into your site's HTML, **overly broad selectors can unintentionally affect other elements on your page**. Always use highly specific selectors and test all changes on a staging environment before publishing to production. ![Warning example showing how outer wrapper CSS injected into page HTML can affect other website elements if selectors are not specific](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/7a0330247c6dfa7b11c7-7ca5a248bd2a.webp) Outer wrapper CSS is injected into the page HTML — use specific selectors and test carefully to avoid unintended styling conflicts. ## Common Issues & Fixes: Custom CSS on Cookie Banners - **CSS changes inside the banner aren't affecting the outer wrapper?** Inner banner CSS applies only within the iframe and cannot reach the outer container. To style the outer wrapper, use the `/*SP-OUTER-START*/` ... `/*SP-OUTER-END*/` syntax as described above. - **Outer wrapper styles are affecting other parts of your website?** Your CSS selectors are likely too broad. Scope them as specifically as possible to the banner's outer container class. Always test on a staging site before pushing to production to catch unintended side effects. - **Concerned about the risks of injecting CSS into page HTML?** Yes — outer wrapper CSS is injected directly into your site's HTML, so careless or generic styles can override other page elements. Use highly specific selectors, avoid global resets, and review changes in DevTools before publishing. ## Frequently Asked Questions (FAQ) ### What is the difference between inner banner CSS and outer wrapper CSS in Secure Privacy? Inner banner CSS is scoped inside the banner's iframe and can only affect elements within the banner itself—such as buttons, text, and padding. Outer wrapper CSS, placed between `/*SP-OUTER-START*/` and `/*SP-OUTER-END*/`, is injected into the page HTML and controls the outer container's layout properties like position, margin, and shadow. ### Can inner banner CSS affect my website's other elements? No. Because inner banner CSS is applied inside an iframe, it is fully isolated from the rest of your page. Only CSS placed between the `/*SP-OUTER-START*/` and `/*SP-OUTER-END*/` tags can affect elements outside the banner. ### Where exactly do I add custom CSS in Secure Privacy? Go to **Design > Cookie Banner** in your Secure Privacy dashboard. The Custom CSS input field is located below the banner preview. Both inner and outer wrapper CSS rules are entered in this same field — the `/*SP-OUTER-START*/` tags differentiate which scope applies. ### What kinds of styles should I apply to the outer wrapper vs the inner banner? Use **inner banner CSS** for typography, colors, padding, and button styles. Use **outer wrapper CSS** for positioning, margins, box shadows, z-index, and other layout-level properties that control how the banner sits on the page. ## Need More Help with Banner CSS Customization? If you have questions or need assistance with custom CSS for your Secure Privacy cookie banner, contact our support team at [support@secureprivacy.ai](mailto:support@secureprivacy.ai). ## See Also - [How to Add Custom CSS for Improved Design and Branding](https://support.secureprivacy.ai/article/add-custom-css-for-branding--secureprivacy-guide) - [Banner Customization Overview](https://support.secureprivacy.ai/article/customize-your-websites-cookie-banner-using-templates) - [Customize Cookie Banner Design — Secure Privacy Guide](https://support.secureprivacy.ai/article/enhance-the-look-of-your-website-with-customized-cookie-banners-design)