# How can I code the following picture?

**URL:** <https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284>\
**Category:** General\
**Created:** [January 1, 2017, 7:32pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284 "2017-01-01T19:32:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Franj3y](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/franj3y/32/76110_2.png) [@Franj3y](https://forum.freecodecamp.org/u/Franj3y)\
**Post date:** [January 1, 2017, 7:32pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/1 "2017-01-01T19:32:19Z")

</div>

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

![](https://global.discourse-cdn.com/freecodecamp/original/3X/8/a/8ad98581331cbf5baebd095704cbcd66cf571ef1.PNG)

Can someone advise me please?

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [January 1, 2017, 7:40pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/2 "2017-01-01T19:40:14Z")

</div>

So what doesn’t work?

EDIT: [This](http://codepen.io/benjaminvanzwienen/pen/ggYvZX) is it right?

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [January 1, 2017, 9:33pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/3 "2017-01-01T21:33:36Z")

</div>

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

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

```auto
<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>

```

![](https://global.discourse-cdn.com/freecodecamp/original/3X/2/a/2a413b9bd77a2c81e6ce7bf8580cce721987347d.png)

---

<div class="post-metadata">

**Author:** ![michaelhenderson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/michaelhenderson/32/356215_2.png) [@michaelhenderson](https://forum.freecodecamp.org/u/michaelhenderson)\
**Post date:** [January 2, 2017, 4:51am UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/4 "2017-01-02T04:51:41Z")

</div>

Awesome! @BenGitter always pulling through!

---

<div class="post-metadata">

**Author:** ![Franj3y](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/franj3y/32/76110_2.png) [@Franj3y](https://forum.freecodecamp.org/u/Franj3y)\
**Post date:** [January 2, 2017, 4:27pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/5 "2017-01-02T16:27:18Z")

</div>

Thanks guys. I understand now.

---

<div class="post-metadata">

**Author:** ![michaelhenderson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/michaelhenderson/32/356215_2.png) [@michaelhenderson](https://forum.freecodecamp.org/u/michaelhenderson)\
**Post date:** [January 2, 2017, 4:28pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/6 "2017-01-02T16:28:02Z")

</div>

no problem, have a great day and happy coding 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:08pm UTC](https://forum.freecodecamp.org/t/how-can-i-code-the-following-picture/71284/7 "2021-01-16T17:08:04Z")

</div>