# Override border-radius variables with theme
**URL:** https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574
**Category:** UX
**Created:** [November 23, 2022, 6:51pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574 "2022-11-23T18:51:56Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 23, 2022, 6:51pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/1 "2022-11-23T18:51:57Z")
Hello,
I tried to override the [new border-radius variables](https://github.com/discourse/discourse/pull/19037) with a remote theme but it seems to the core `:root` variables are always prioritize. I can override these if I create a theme component in admin. Is there a way to override these with theme? What am I missing? 🙂
This tiny change is so useful thanks so much! ❤
* * *
Ok it works as expected just my test site joking me. 🙂
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 24, 2022, 4:32am UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/2 "2022-11-24T04:32:57Z")
> [@Don](#):
>
> Ok it works as expected just my test site joking me. 🙂
Uh it seems that was not a joke 😄 With remote theme I can only override it if I use `!important`.
If I use it like this 🔽
```scss
$border-radius: 2em !important;
:root {
--d-button-border-radius: #{$border-radius};
--d-input-border-radius: #{$border-radius};
}
```
Otherwise if I try it like this 🔽
```scss
:root {
--d-button-border-radius: 2em;
--d-input-border-radius: 2em;
}
```
Then the core `:root` variables are prioritized.
What am I missing? 🤔 Thank you! 🙂
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 24, 2022, 3:27pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/3 "2022-11-24T15:27:34Z")
It’s working when I test it in a theme… the core root gets overruled by theme root, as expected.
Can you show some more info? Where do you define your root? What does your inspector look like?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 24, 2022, 5:44pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/4 "2022-11-24T17:44:03Z")
Hello Charlie,
Thanks for checking this 🙂
I tried to add in `scss/custom-variables.scss` and import it to the `common.scss`. And I tried to add directly to `common.scss` too.
I just notice now it works if there is no other component (created in admin) assigned to the theme. If I create a component in admin with some css in common section. Then it won’t override the core root variables for me.
It works if the theme has no component or the component Common / CSS is empty.
* * *
If I create a component with some Common / CSS and activate it to the theme.
Then it is not working for me.
The `d-default-border-radius` and `d-select-body-border-radius` are custom.
Thanks for the help! 🙂
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 24, 2022, 6:23pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/5 "2022-11-24T18:23:36Z")
I see. Very interesting. Thanks for the clear steps.
Will see what I come up with. At the moment I’m sceptical there will be a different solution that the !important you’re already using, but will be good to know how/why this is working like this.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 8, 2022, 8:22pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/8 "2022-12-08T20:22:39Z")
hmm yeah I can repro this… it’s a little strange.
I’ve got a [remote theme](https://github.com/awesomerobot/discourse-test-theme) and all `common.scss` contains is:
```plaintext
:root {
--d-border-radius: 100px;
}
```
this works and I get rounded buttons and other elements:
Once I add a _local_ theme component that contains CSS, it breaks. I created a local theme component that only contains this in `common.scss`:
```scss
body {
background: red;
}
```
I get the red background, but the border-radius is gone:
The same [component](https://github.com/awesomerobot/discourse-test-theme-component) works fine remotely. I get both the red background and the rounded borders.
@david/@pmusaraj does this have something to do with the order of how remote and local themes are compiled?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [December 8, 2022, 8:34pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/9 "2022-12-08T20:34:51Z")
I think it has to do with our magic injection of `variables.scss` into every theme CSS file. Now, we have this in `variables.scss`:
```scss
:root {
--topic-body-width: #{$topic-body-width};
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
--d-border-radius: initial;
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);
}
```
And because we inject that SCSS file into every theme and plugin SCSS file, it gets repeated over and over:
The only way to override it currently is to add the override to the last theme stylesheet, only then it gets output last.
I think we need to move this `:root` declaration somewhere global outside of `variables.scss` in core.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 8, 2022, 10:03pm UTC](https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/10 "2022-12-08T22:03:41Z")
Aha! thank you so much, I never really processed why those are repeated and just overlooked it completely.
I’ve relocated these to another file so they aren’t repeated, and I confirmed that it solves the problem.
[https://github.com/discourse/discourse/pull/19389](https://github.com/discourse/discourse/pull/19389)