Product Page Border Styling

Store Design
, ,

Topic summary

A user encountered a border styling issue on their Shopify product page, specifically with subscription option boxes. An attached screenshot showed the problem area.

Initial Solutions Offered:

  • Two community members provided CSS code snippets targeting the .smartrr-subscription-benefits-container class
  • Suggestions included adding border-radius and border styling to theme.css or theme.liquid files

Clarification:
The user clarified they were trying to connect the 2nd and 3rd boxes when subscription options are clicked, not the initially assumed elements.

Resolution:
The user resolved the issue independently by updating the subscription group ID in their CSS. The solution involved targeting a specific data-smartrr-selling-plan-group-id attribute and applying custom border styling to remove bottom borders and border-radius when the subscription group is active, creating a seamless connection between boxes.

Status: Resolved - working CSS code provided.

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

Hello everyone,

I need help with this border styling issue.

None of my tries have been working.

Thank you!

https://bc0wgjmppvuob6yw-89990365496.shopifypreview.com

swalter85_0-1736434280755.png
swalter85_0-1736434280755.png625×931 51.6 KB

2

Hi @swalter85

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.smartrr-subscription-benefits-container {
    margin-top: -2px;
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
    border-top: 2px solid black;   
}

Result:

websensepro_0-1736434982697.png
websensepro_0-1736434982697.png383×375 20.8 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Hi @swalter85

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

4

@websensepro I’m trying to connect the 2nd and 3rd box.

Sorry for not being clear.

5

Didn’t work @topnewyork

P.s. I’m trying to connect the the 2nd and 3rd box when subscription options is clicked.

swalter85_0-1736435307607.png
swalter85_0-1736435307607.png619×662 34.3 KB

6

I was able to fix it myself. The subscription group id needed to be updated.

[data-smartrr-selling-plan-groups] [data-smartrr-selling-plan-group-id="a6fc2cb43da04ae5f4738acf783a91e1eac62343"].smartrr-group-active {
border-top: 2px solid #333333;
border-left: 2px solid #333333;
border-right: 2px solid #333333;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-bottom: 0 !important;
border-bottom: 0 !important;
}