CSS Buttons Rounded on One Side

Googles new buttons - how to do rounded ends in CSS

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>

How to add rounded corners to a single side in HTML-CSS

Try like following snippet, for more info take a look here:

.button {
  border: 1px solid #00bfff;
  border-bottom-right-radius: 30%;
  border-top-right-radius: 30%;
  padding: 20px;
  background: #00bfff;
}

<button type="button" class="button">Button</button>

How do I remove just one side of a button's rounded corners?

Here's an example: http://jsfiddle.net/Gajotres/4wd92/

Wrap a button in div so css can apply only to it:

<div id="custom-button-container">
    <input type="button" data-theme="a" value="Changed Button">
</div>

CSS:

#custom-button-container .ui-btn-corner-all {
    border-radius: 0 1em 1em 0 !important;
}

Creating rounded corners for top half of the buttons in CSS

You can use the following styling rules:

border-top-left-radius
border-top-right-radius

Note: The border-radius rule works without the -webkit- bit.

How can I do a round button, with one side being even, straight? (Image)

You can use border-radius and set a value:

.element {
  border-radius:15px;
}

Or you can set specific values for each corner, as mentioned above.

.element {
  border-top-left-radius: 15px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 25px;
}

I want my buttons to be flat on top with rounded corners

Just add a border-radius to the button.

button {  border-radius: 20px;}

<button>Click</button>

CSS - left border of button is rounded on the right side

You can override the button border:

https://jsfiddle.net/uwnyds3s/

.button-viztype {
    border: none;
    height:75px;
    font-size: 1.3em;
    border-left-style: solid;
    border-left-width: 7px;
    box-shadow: 0px 3px 1px #c3c3c3;
}

Styling a CSS Button with Pointed Left Edge and Rounded Right Edge

This can be done using CSS alone in combination with the pseudo elements

a {  position: relative;  display: inline-block;  padding: 2px 10px 2px 20px;  border-top-right-radius: 10px;  border-bottom-right-radius: 10px;  overflow: hidden;  text-decoration: none;}a::before,a::after {  position: absolute;  content: '';  left: 0;  top: 50%;  width: 100%;  padding-bottom: 100%;  background: lightgray;  transform: rotate(-45deg);  transform-origin: left top;  z-index: -1;}a::after {  left: 5px;  border: 1px solid black;}

<a href="#">BACK</a>

How to make a div rounded only from right and left?

Try like this.

button{
  background: transparent;
  border: 2px solid black;
  font-size: 25px;
  border-radius: 999px;
  width: 200px;
  padding: 5px;
}

<button>View All</button>

---

Related Topics