How can I create rounded header corners in the Dawn theme?

Topic summary

A user is attempting to add rounded bottom corners to the header in Shopify’s Dawn theme but encounters an issue where a white background persists beyond the rounded corners.

Problem Details:

  • CSS applied to the sticky-header component doesn’t fully resolve the issue
  • The section’s background remains visible even after adding border-radius
  • Screenshots demonstrate the unwanted white background extending past the rounded corners

Attempted Solution:
Another user suggested adding CSS code to the base.css file targeting the header element with border-radius and border properties. However, this approach was unsuccessful—the rounded corners appeared, but the white background issue persisted.

Current Status:
The problem remains unresolved. The user is still seeking a solution to eliminate the background that extends beyond the rounded header corners.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.

I want to make my left and right bottom corners round, I couldn’t do it because the section still has background even when adding css to the sticky-header component. I’m lost and I cant find any answers elsewhere so I hope someone could help me.

Here’s a sample screenshot:

In this screenshot I have a

Here’s a share link to my development store: https://tw-dawn.myshopify.com/?preview_theme_id=132785438872
password is: tw

hi, @Jun_Kuan

Go to Online Store
2) Edit Code
3) Find base.css file

  1. Add the following code in the bottom of the file
header.header.header--middle-left.header--mobile-center.header--has-menu {
    border-radius: 20px;
    border: 1px solid black !important;
}

unfortunately, that doesnt work. heres what it looks like with your code:

as you can see, after the rounded corners, theres still a white background.

By the way, thanks for taking your time to reply! I’m a huge fan of your youtube channel!