I'm trying to mare a button whith an irregular shape similar to this using only CSS Somebody have any clue?

enter image description here

  • 1
    You could embed an SVG into the CSS.
    – DA01
    Sep 28, 2016 at 20:34
  • Link embedding inside SVG; image map; SVG with pseudo-element; just live with a little live clickable area outside the button image.
    – Yorik
    Sep 28, 2016 at 20:56
  • You could get something close in just CSS using border-radius, but given your lack of effort into a good question that's as much as I will help you Sep 29, 2016 at 2:53

1 Answer 1


You can play with the border-radius property to get some odd shapes...

enter image description here

button {
    background: #a00;
    color: #fff;
    border: 2px solid #a33;
    padding: 20px 50px;
    margin: 20px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 3px 5px #aaa;

    /* where the magic happens */
    border-radius: 40% 60% 30% 50%;



If you need that specific shape, you'll have to work out the percentage of radius for each corner to get close.

  • That's awesome! exactly what I need! thanks guys!
    – m. Hebert
    Sep 30, 2016 at 13:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.