# How do I apply different border-radius on mobile using CSS in Wix Studio? **URL:** \ **Category:** Ask the community\ **Tags:** wix-studio, question, code\ **Created:** [June 4, 2025, 9:36am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317 "2025-06-04T09:36:10Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![user5691](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user5691](https://forum.wixstudio.com/u/user5691)\ **Post date:** [June 4, 2025, 9:36am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/1 "2025-06-04T09:36:10Z")
**Question:** My CSS works good on Desktop but cannot have any adjustment at mobile **Product:** I used Wix Studio to build my website **What are you trying to achieve:** I’m Trying to have different border-radius px on different device, I use media query to make coding have different corner size on different device but it can only works at desktop **What have you already tried:** I’ve already tried different code, different situation but media query cannot works everywhere ---
**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\ **Post date:** [June 4, 2025, 10:20am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/2 "2025-06-04T10:20:34Z")
Are you able to share the CSS you used? Also curious - is this something that could be done through the editor UI? Set the corner radius on desktop, then on mobile/tablet change it to a different unit? ---
**Author:** ![user5691](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user5691](https://forum.wixstudio.com/u/user5691)\ **Post date:** [June 5, 2025, 1:06am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/3 "2025-06-05T01:06:04Z")
```CSS .change-story-ltbox { border-radius: 32px; } @media screen and (max-width: 480px) { #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-change-story-ltbox[style] { border-radius: 24px 24px 0 0 !important; } } ``` * * * here’s my CSS and no, this component didn’t have corner radius setting in editor UI but I could done by adding another unnecessary component to achieve adjust corner in editor UI but in this way will cause layout broken easily. ---
**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\ **Post date:** [June 5, 2025, 10:29am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/4 "2025-06-05T10:29:25Z")
Ahhh okay - from what I’m piecing together, you have a lightbox, and want to customize the border radius of the lightbox, right? * * * Firstly, Studio uses a mixture of symantic classes, and custom classes to target components (you’ll find the synamtic classes for an element in the “CSS Classes” panel. This shows the area that can be targetted) For example, a button has: ![The image shows a user interface for selecting or creating a button class in an interface, with options for CSS reference, custom classes, and global button classes.](https://us1.discourse-cdn.com/wix/original/3X/f/9/f9e823a66b80c4f873d982e0769f62d186fc73bf.png) * * * In your case, you’d simply use: ```CSS .change-story-ltbox { border-radius: 32px; } @media screen and (max-width: 480px) { .change-story-ltbox { border-radius: 24px 24px 0 0; } } ``` And add `change-story-ltbox` to the lightbox custom class ![Screenshot 2025-06-05 at 11.29.05](https://us1.discourse-cdn.com/wix/original/3X/b/6/b691386a4e9fe40aaa2ef74b30b9da4cce960bfc.png) ---
**Author:** ![user5691](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user5691](https://forum.wixstudio.com/u/user5691)\ **Post date:** [June 6, 2025, 1:25am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/5 "2025-06-06T01:25:35Z")
I’ve been using this method from the beginning ![Screenshot 2025-06-06 at 9.24.27 AM](https://us1.discourse-cdn.com/wix/original/3X/f/e/feaa0136f4c9ebb4bdd84ba283f8117d2c27de02.png) , but it hasn’t worked at all. Whether I publish my website or preview it in the editor, it still doesn’t take effect. When I inspect the page, I can see that my media query isn’t being detected at all. So I switched to using WIX Studio’s original CSS classes and IDs, hoping their specificity is higher than the custom CSS I wrote, so they can override the default styles. But it seems not working too. Is there any other ways can solve this issue or what’s reason will cause this issue? and thanks for your kindly reply ---
**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\ **Post date:** [June 6, 2025, 8:42am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/6 "2025-06-06T08:42:01Z")
Are you able to share a link to the site/screenshot of the element you’re trying to apply the CSS too? I tried on my end, and it’s working - so a little confused as to what’s happening 🙂 ---
**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\ **Post date:** [June 10, 2025, 3:40pm UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/7 "2025-06-10T15:40:05Z")
Looping back here - did you get any further with this? ---
**Author:** ![user5691](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user5691](https://forum.wixstudio.com/u/user5691)\ **Post date:** [June 16, 2025, 1:13am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/8 "2025-06-16T01:13:56Z")
hi I cannot share the link cause it is an internal site. It’s still have problem can’t solve but I’ll change using another widget. Thanks for your assistant ---
**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\ **Post date:** [June 16, 2025, 9:21am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/9 "2025-06-16T09:21:52Z")
Looking at it again, I see that the screenshot you shared just shows in the bottom right “TPAWidget elements aren’t supported” - meaning if it’s a Third Party App, it won’t support CSS customization at the moment ---
**Author:** ![user5691](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user5691](https://forum.wixstudio.com/u/user5691)\ **Post date:** [June 17, 2025, 1:29am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/10 "2025-06-17T01:29:31Z")
I didn’t used any third party app and i check back again it didn’t appear that this time (but this css still can’t work) ![Screenshot 2025-06-17 at 9.28.09 AM](https://us1.discourse-cdn.com/wix/original/3X/2/0/20cc58a9709871d341c9e530833c80b4ef658cb7.png) ---
**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\ **Post date:** [June 17, 2025, 3:10am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/11 "2025-06-17T03:10:40Z")
so you just need corner radius on a lightbox. Just make the lightbox background 0% - add another container - stretch it and give it corner radius. Then you can adjust to suit breakpoints. no need for CSS code ---
**Author:** ![user5691](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user5691](https://forum.wixstudio.com/u/user5691)\ **Post date:** [June 17, 2025, 6:44am UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/12 "2025-06-17T06:44:25Z")
Yes I know but just wondering why this way can’t work ---
**Author:** ![Rob](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/rob/32/84134_2.png) [@Rob](https://forum.wixstudio.com/u/Rob)\ **Post date:** [June 17, 2025, 4:08pm UTC](https://forum.wixstudio.com/t/how-do-i-apply-different-border-radius-on-mobile-using-css-in-wix-studio/71317/13 "2025-06-17T16:08:48Z")
I just wanted to chime in that I was able to get it it to work on my end but just targeting the custom class within the Editor. I have a very subtle radius on desktop & tablet as shown here: ![A pop-up advertisement offering a 20% discount on a website with the text "Our spring sale starts today" and a "Shop Spring Sale" button. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/4/e/4e6b2cdb93b923a0aa96237eba2ee799da6f6cd9.png) But then on mobile you can see I have the media query and it works using only the custom class: ![The image shows a user interface within Wix software with CSS classes highlighted, specifically targeting a purple purple lightbox element with content about a 20% discount. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/2/1/21a629bfe40302506788ab44c021bb0bec56b921.png) My educated guess is that the portions like #SITE\_CONTAINER don’t target elements and additionally that #main\_MF#main\_MF are targeting the same ID (though I’m not an expert on CSS by any means).