How can I code the following picture?

I want to code in CSS or HTML so I can obtain the result that looks like the below picture: I believe it’s with border-radius property but I cannot get it similar

Can someone advise me please?

So what doesn’t work?

EDIT: This is it right?


I imagine that you’re seeing too much rounding in the borders. border-radius can take fractions as parameters. For example:

border-radius: 30px/40px;

This sets the horizontal radius/vertical radius (think of it as setting the two axes of an ellipse). This helps you keep the horizontal or vertical edge straighter while curving the other. Here’s my attempt (you’ll need to tweak the padding):

#comprar-btn {
  border-radius: 40px/35px;  /* The important line */
  font-family: sans-serif;
  color: #ddd;
  border: 1px solid #ddd;
  padding: 9px 15px;
  font-weight: bold;
  font-size: 2em;
  background-color: rgba(0,0,0,0);

body {
  background: rgb(248,75,33);

<button id="comprar-btn">

1 Like

Awesome! @BenGitter always pulling through!

1 Like

Thanks guys. I understand now.

1 Like

no problem, have a great day and happy coding :slight_smile: