Googles new buttons - how to do rounded ends in CSS

Question

you may have noticed that Google are changing their design ethic a little, and giving things "rounded ends". Have a look at this pic to see what I mean:

Love it or hate it, lots of people will follow trend. So what is the best way to do rounded ends to a button in CSS? Round / circular buttons are done with

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

Rounded corners are done with :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

But how to apply a 50% rounded corner to a multiline button of any width, as per the google site?

I have done it with a large pixel value in this codepen https://codepen.io/anon/pen/yjdRXB But what if the content is very large? Or does Google only plan to use this style on single-line text? I want to replace the 500px value in my pen with a value which works for any font size and any menu item.

Any thoughts on this are appreciated. Thanks!

Answer 1

I think you're in the right track, just set it as larger as it makes you safe thinking about maximum height of button/item/div/whatever. I've checked Google Drive button by inspecting it, its border-radius is set to be 66px.

Notice that I've set the 4 corners in the same border-radius property, 2 of them being 0 just like the example. The border-radius are defined in the following order: top-left, top-right, bottom-right, bottom-left.

.button {
  padding: 10px 30px;
  background: red;
  border: none;
  border-radius: 0 100px 100px 0;
}
  

<button class="button">Hello world</button>