Discourse Oval buttons?

Hi everyone. I saw sitepoint forum and im in love :slight_smile:
Can I do this with css ? like sitepoint forum buttons.

but I want to do all button

for example

.nav-pills>li>a {
border-radius: 5px;
a.badge-category.home {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
a.badge-category.category-dropdown-button.home {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
.d-header .icons .icon {
    border-radius: 5px;
.alert.alert-info {
    border-radius: 5px;
button {
    border-radius: 5px;

I’m not really sure what your question is. Is there something you’re having trouble with? If so, it would be good if you could post a demo (say, on CodePen) that shows where you’re up to.

Im sorry for my english.
I want oval buttons just as in your forum.

Do you mean the round avatars?

No I show you now with pics
Your forum :

My buttons are like boxes.
But yout buttons are like oval. ( )

My Forum :

So you mean the rounded corners?

Yes I mean rounded corners

The code you posted makes the corners rounded (except for the css in a.badge-category.category-dropdown-button.home which only rounds the right-handed corners. If you want them to be more rounded just increase the 5px to a larger size like, for example, 10px.

Thank you but I want to make all the buttons.
How can I find css codes ?


border-radius: 5px;

you already have should do the job. You just need to apply it to the appropriate classes.

Many thanks. i will do that. and excuse me can i ask you one question.
.names span.Administrators a{color:#dc2e17}
this code not working i changed Administrator to admins again not changed.
i tried staff and this working but I want to give different colors to the rankings
Can I do that ? and how
again thank you

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