Rounded buttons CSS

  • 29 November 2021
  • 4 replies
  • 49 views

Userlevel 3

I’m seeing how rounded buttons are coming back in vogue on various web pages and thought I would share some CSS code to have rounded buttons in Docebo Learn:

/* Round corners on mdl buttons */
.mdl-button {
border-radius:54px !important;
}

You can change the “54” value to have the amount of roundness you desire. The code affects content context boxes but also some other buttons as it is a general CSS-class:

 

 


4 replies

Userlevel 4
Badge

Thanks for sharing this little tidbit.

Userlevel 5
Badge +1

@Richard- hey - a question for you - even though I am an old timer in some ways - rounded buttons with css is a great modern technique. For some of us stuck with some older browsers in our lifecycle of supporting our learn instances - we used to have to do all kinds of “exception css” to accommodate them - sometimes even get fancy - to pull off rounded corners consistently (I may be seriously showing my age). When you went about establishing this trick - did you test 3 to 4 modern browsers deep? Any findings that were funky???

(Editorial - thankfully IE is at its end of life).

 

Userlevel 3

@dklinger, have only tested it on the latest versions of Chrome, FF and Edge so not sure if it will work on older browsers.  :thinking:

Badge

@Richard- hey - a question for you - even though I am an old timer in some ways - rounded buttons with css is a great modern technique. For some of us stuck with some older browsers in our lifecycle of supporting our learn instances - we used to have to do all kinds of “exception css” to accommodate them - sometimes even get fancy - to pull off rounded corners consistently (I may be seriously showing my age). When you went about establishing this trick - did you test 3 to 4 modern browsers deep? Any findings that were funky???

(Editorial - thankfully IE is at its end of life).

`border-radius` is a css property that is universally understood by almost all browsers, even IE. Only IE 8 and lower, Opera Mini and very old versions of Opera don’t understand `border-radius`. However, if you are ever unsure, use this website to check whether a feature is considered “modern”: https://caniuse.com/?search=border-radius. This works for CSS, JavaScript, HTML tags, etc.

Reply