How can I change my display border shape to non-rectangular?

[Junkit_0622]

I had do the layout like i want , but the border how i can do like this ! i don’t want my display border look like rectangle !
This is the sample i want to be !

Thanks & Regard

[Made4uo-Ribe]

Hi @Junkit_0622 ,

You need to add border radius on the border so it will a bit round corners. Would you mind to share your URL website? with password if its protected. Thanks!

[Junkit_0622]

Sure ! Thanks for your assist !

https://209e1c-3.myshopify.com/?_ab=0&_fd=0&_sc=1
PS:junkit123

[Junkit_0622]

But maybe i send that is my current out look ! I was creating a new theme draff for my out look !

is it any effect to you ?

[zaczee]

Hi,

Can you share the preview link of the theme you are working

[Junkit_0622]

Sure , Here you go !
https://209e1c-3.myshopify.com/?_ab=0&_fd=0&_sc=1
Ps: junkit123

[oscprofessional]

Hello @Junkit_0622

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.content-container {
    border-radius: 20px !important;
}
.media--transparent {
        border-radius: 20px !important;
}

[Junkit_0622]

Hi Oscprofessional ! thanks for your help, But it only work for that multicolumn section only !!
this is after use your code that preview out-look

Still thanks for your help !

[Made4uo-Ribe]

Thank you for the information.
Would you mind to pin point which sections you like to add rounded border? And please, if your store is under maintenance, can you provide the preview? I put some border in your home page. Check this. Thanks!

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. 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:
4. And Save.

.multicolumn-card.content-container {
    border-radius: 20px;
}
.media.media--transparent.media--square {
    border-radius: 20px;
}

Result:

I hope it help.