How to make the dawn image banner text box edges circular

Store Design
, ,

Topic summary

A user wants to add rounded corners to the text box edges in their Dawn theme’s image banner.

Two solutions were provided:

  1. Via theme.liquid file: Add CSS code before the </body> tag targeting .banner__box with border-radius: 25px !important wrapped in a media query for screens with minimum width of 750px.

  2. Via CSS file (recommended): Navigate to the theme’s CSS file (base.css, style.css, or theme.css) in the Assets folder and add .banner__box { border-radius: 20px !important; } at the bottom.

Both approaches use the border-radius property to create rounded corners, with adjustable pixel values to control the curvature. The user can modify the pixel value (20px or 25px) to achieve their desired corner roundness.

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

Hi @Amxr

Check this one.

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:

.banner__box {
    border-radius: 20px !important;
}

And Save.

You can adjust the size of the rounded corner.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!