# How to make forum buttons rounded across all themes

**URL:** https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874
**Category:** Support
**Created:** [July 17, 2024, 7:36pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874 "2024-07-17T19:36:00Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 7:36pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/1 "2024-07-17T19:36:00Z")

</div>

Good evening,

I’m trying to make all the buttons on my forum more rounded square. I’ve used the CSS within CSS/HTML:

`.btn { border-radius: 5px; }`

This works in the preview tab, but it doesn’t work in the live forum after including the component on these themes.

Currently on the forum:

 ![This image shows the interface of an online forum or discussion board, with menus for creating a new topic, selecting categories, formatting options, and a text entry area for posting content. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/8/9/7/897de4e4bf21eb7fd3f1b0e1878195e9afa15310.jpeg)

After using CSS:

 ![Screenshot_20240717_202839_Chrome](https://global.discourse-cdn.com/meta/original/4X/b/4/f/b4fa59d159aca2ee161f022cd43cf1287fde7404.jpeg)

Here on Meta, using the Fully theme, the buttons are rounded. However, using this theme on my forum, they are not.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 17, 2024, 7:47pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/2 "2024-07-17T19:47:28Z")

</div>

Try this #Customization > Theme component

> [@Discourse Button Styles](https://meta.discourse.org/t/discourse-button-styles/88154):
>
> This theme component includes basic settings for changing button colors without writing CSS. [Github repo](https://github.com/awesomerobot/discourse-button-styles): https://github.com/awesomerobot/discourse-button-styles Installation: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) Preview: [Example of what you can style with the settings in this theme](https://theme-creator.discourse.org/theme/awesomerobot/button-styles) What the settings look like: There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius): basic bu…

This one will add options to round other things like quotes, images and more

> [@Rounded Borders for images, oneboxes, blockquotes & more](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044):
>
> Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity [topic thumbnail](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) support for: list ro…

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 7:50pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/3 "2024-07-17T19:50:29Z")

</div>

My God! I’m always telling my users to use the search function before creating a topic!

Now I’m guilty of the same thing! I was searching for “rounded buttons.” I was more complex than it needed to be. I should have just searched for “buttons.”

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 17, 2024, 7:52pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/4 "2024-07-17T19:52:33Z")

</div>

Well I used this search term.

```plaintext
"#customization:theme-component Round"

```

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 17, 2024, 7:53pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/5 "2024-07-17T19:53:10Z")

</div>

You can also do

```css
:root {
  --d-button-border-radius: 5px
}

```

or

```css
:root {
  --d-border-radius: 5px; 
}

```

if you really want rounded corners everywhere

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 8:04pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/6 "2024-07-17T20:04:39Z")

</div>

Hmm… again, both only seem to work in preview mode, even after refreshing the forum and logging in and out.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [July 17, 2024, 8:05pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/7 "2024-07-17T20:05:00Z")

</div>

> [@Aaron\_Walsh](#):
>
> use the search function

Open wound on sight… where is my salt

Fifth hit:

 ![IMG_3419](https://global.discourse-cdn.com/meta/original/4X/e/4/b/e4b51cf7e16f8c59f226960dd752aab0dfa62125.jpeg)

Sorry mate, I just couldn’t resist the temptation 🤣

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 17, 2024, 8:08pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/8 "2024-07-17T20:08:58Z")

</div>

After you install a component & To apply it you need to add to your themes, then need to refresh the page.

After that is should be visible logged in or not

Preview is just for testing without any themes active

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [July 17, 2024, 8:10pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/9 "2024-07-17T20:10:11Z")

</div>

> [@Aaron\_Walsh](#):
>
> both only seem to work in preview mod

Did you add any other components that also customize the buttons?

like [Rounded Image Borders](https://meta.discourse.org/t/square-profile-thumbnails/316591)

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 8:10pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/10 "2024-07-17T20:10:32Z")

</div>

Sorry, I was responding to @awesomerobot’s post with the CSS.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 17, 2024, 8:11pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/11 "2024-07-17T20:11:53Z")

</div>

Same with creating a custom component. After you save it you need to add it to your themes.

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 8:18pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/12 "2024-07-17T20:18:04Z")

</div>

Done this also.

Just looking at @Moin’s response and can’t see anything that will conflict with the custom component. I’ll take a deep dive into “Discourse Button Style.” I did have this before, and to be honest, there were a lot of empty boxes, and my ADHD brain couldn’t cope with it, haha! Just a simple CSS would work for me (if it did).

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 8:23pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/13 "2024-07-17T20:23:03Z")

</div>

I do have this, yes. So this is conflicting with the custom component?

So I’ll have to manually create CSS for the buttons, avatar, and images that I’m wanting/looking at.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [July 17, 2024, 8:28pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/14 "2024-07-17T20:28:52Z")

</div>

> [@Aaron\_Walsh](#):
>
> So this is conflicting with the custom component?

There is a setting `button settings enabled`, so probably

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [July 17, 2024, 8:36pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/15 "2024-07-17T20:36:10Z")

</div>

I need to make sure I check all options before moving to another component.

Both

### Button corner intensity

### Category style box corner intensity

were set to 0px.

Sorry for wasting time! But good teamwork!

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [July 19, 2024, 4:59pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/16 "2024-07-19T16:59:45Z")

</div>

This is nice. I think my component currently covers most buttons but I didn’t know about this approach, thanks.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [August 18, 2024, 5:00pm UTC](https://meta.discourse.org/t/how-to-make-forum-buttons-rounded-across-all-themes/316874/17 "2024-08-18T17:00:06Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
