How can I code the following picture?

1

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?

2

So what doesn’t work?

EDIT: This is it right?

2 Likes
3

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):

<style>
#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);
}
</style>

<button id="comprar-btn">
  COMPRAR ONLINE
</button>

1 Like
4

Awesome! @BenGitter always pulling through!

1 Like
5

Thanks guys. I understand now.

1 Like
6

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