Announcement bar border radius

Store Design
, ,

Topic summary

Goal: Round the Shopify announcement bar and align its side padding with the section below.

What worked:

  • Rounding achieved by adding CSS to .announcement-bar (e.g., border-radius: 50px, margin, box-shadow). An alternate method suggested wrapping tweaks (overflow: hidden, width: fit-content, centered margin).

Follow-up issue:

  • Adding padding-left/right to .announcement-bar__message only shifted text, not the bar container.
  • Suggested fix: add padding to the section container (div#shopify-section-…__header-announcement) with padding: 0 10px !important;.

Implementation hurdles:

  • An initial code typo (“padding” misspelled) caused an error, shown in a screenshot.
  • CSS must be placed in base.css or theme.css (end of file). The user mistakenly added it to theme.liquid.
  • If those CSS files don’t exist, place the rule before the closing tag in theme.liquid.

Assets central to context:

  • Images illustrated the desired rounded style and padding alignment, plus an error screenshot.
  • Store link provided for testing.

Status: Rounding solved; padding alignment not yet confirmed. Discussion remains open.

Summarized with AI on December 11. AI used: gpt-5.
1

Hi im trying to make the announcement bar at the top of the page to be rounded just like the below image but i cant get it to work. Anyone can help me out with a CSS code? Much appreciated. https://5wvev8gcy0zgl4qz-77830390093.shopifypreview.com

image
image2925Ă—1506 543 KB

2

Hi,

Hope this will help

Most themes wrap the announcement bar inside a full-width container, so adding a border-radius to the bar alone doesn’t do anything until you “unconstrain” it a bit.

Here’s a CSS approach that usually works.

CSS example

/* Rounded announcement bar */
#shopify-section-announcement-bar .announcement-bar {
    border-radius: 12px;
    overflow: hidden;
    width: fit-content; 
    margin: 0 auto;      /* centers the bar */
    padding-left: 20px; 
    padding-right: 20px; 
}
3

Hello, @JustinasR

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

.announcement-bar {
border-radius: 50px !important;
margin: 10px 15px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

Thank You!

4

Thanks that worked, i also tried to add padding-left and right to that, but its only pushing text itself. Any ideas how to update?

1 Like
5

Happy to hear that, try this code

.announcement-bar__message {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

You can adjust padding as you want.

Thanks!

6

That didnt work. I want the whole column to have the same sides padding as the section below it.

image
image2907Ă—1497 557 KB

7

Hello, @JustinasR

Sorry, try this one

div#shopify-section-sections--26594059911501__header-announcement {
    padding: 0 10px !important;
}

image
image1343Ă—288 73.5 KB

Thank You!

8

Getting this error

image
image910Ă—130 22.9 KB

9

share your store preview link again please?

10

www.mansome.eu just use the main link

11

Please paste the code I provided at the very end of the base.css or theme.css file, and it should fix the issue.

div#shopify-section-sections--26594059911501__header-announcement {
    padding: 0 10px !important;
}

Thanks!

12

Nope, still not working. Pasted in theme.liquid

image
image1316Ă—1084 114 KB

13

paste it in base.css or theme.css not in theme.liquid.

14

My store dont have those.

15

then paste it before the closing tag of < /stlye> in theme.liquid file.

image
image683Ă—545 97.9 KB

Thank You!