Search code examples
htmlcssbuttonshapesborder-radius

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

And yes, the only thing I want to do is apply the border-radius attribute(or something like that) do just 1 corner to a button just like this: "https://i.sstatic.net/Mm9VN.jpg"

Don't worry, the link is generated by StackOverFlow so nothing to worry about the link.

Also, I need to include some code otherwise my question will be closed: Here's what I have tried:

.button {
  border-radius: 30;
}
<button type="button" class="button">Button</button>

But it applies the property to all the corners which is not what I want.

Thank You!

Solution

  • 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>