Dawn - Product Page Accordion Border Styling

[IllIlIl1]

• How can I hide the bottom border of the last accordion row for mobile view (750px and below)?

• How can I apply a border-radius to the top-left and top-right corners of the first accordion row, and the bottom-left and bottom-right corners of the last accordion row?

Reference Image for second point:  https://imgur.com/a/jRKXSF5

Link: https://a93e87-e7.myshopify.com/products/test-product

Keycode: teoree

[namphan]

Hi @IllIlIl1,

- Remove border: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product__info-container .accordion+.accordion {
    border-top: none !important;
}

- Add border radius: please send me the code of main-product.liquid file, I will check and guide it

[Made4uo-Ribe · Accepted solution]

Hi @IllIlIl1 

check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

#shopify-section-template--23282462523702__main .accordion:not(:last-of-type) {
    border-bottom: 0;
}

#ProductInfo-template--23282462523702__main > div:nth-child(9) {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.product__accordion.accordion:last-of-type {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.product__accordion.accordion summary {
    padding-left: 1rem;
    padding-right: 1rem;
}

And Save. 

Result:

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