How can I round header corners on the Dawn theme?

Store Design
, , ,

Topic summary

Goal: Round the bottom corners of the Dawn theme header by 30px and add horizontal margins. The requested margin was clarified to be 2.25rem (not 225rem; rem = root-em, a font-size–relative unit).

What was tried:

  • Add CSS in base.css targeting the header (variants included a generic sticky-header selector and a long class-specific selector). One example also added a temporary background to visualize changes.
  • Initial attempts didn’t apply due to using the wrong selector.

Resolution:

  • The correct selector is the sticky-header element. The working CSS: “sticky-header { border-radius: 0 0 30px 30px !important; margin: 0 2.25rem !important; }”. Using !important ensured it overrode existing styles.

Notes:

  • Screenshots were shared to illustrate the expected visual result but weren’t essential to the solution.

Status: Resolved. The header now has 30px rounded bottom corners with 2.25rem side margins.

Summarized with AI on January 17. AI used: gpt-5.
1

I am using the Dawn theme on my Shopify store. I want to have the bottom 2 corners of my header to be rounded by 30px. I also want there to be a margin on the sides of the header by 225rem. I tried to do this myself but have had no luck. My website is TsunamiTec.com and password is: youdontknow

1 Like
2

Hey @James193

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Hi, @James193 .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

sticky-header {
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background: aqua !important;
}

Result:

websensepro_0-1696228870239.png
websensepro_0-1696228870239.png1350Ă—278 30.8 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

4

Hi @James193

Just to clarify, its not the margin is too much? it will take all space in the website screen. 225rem or 2.25rem? Just check this one if its right. Thanks!

Made4uoRibe_0-1696234198755.png
Made4uoRibe_0-1696234198755.png1365Ă—197 22.2 KB

For the code.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
sticky-header.header-wrapper.color-scheme-51c6447c-4013-49e7-a792-c0c93ae82502.gradient {
    border-radius: 0 0 30px 30px;
    margin: 0 2.25rem;
}
  • And Save.
5

I tried this at the bottom of my base.css and it didn’t work or do anything?

1 Like
6

TsunamiTec.com Password: youdontknow

7

Can you try this one again? just replace the 1st code that I give. Thanks!

sticky-header.header-wrapper.color-scheme-0b4f9145-ad23-49ed-8e50-1055c281223b.gradient {
     border-radius: 0 0 30px 30px !important;
    margin: 0 2.25rem !important;
}

And Save.

1 Like
8

I figured out the problem, wrong selector. this is what ended up working:

sticky-header { border-radius: 0 0 30px 30px !important; margin: 0 2.25rem !important; }