Write CSS to create a circle and a pill-shaped button

Description: Create a red circle of 100px and a green button with fully rounded sides.

Hint:

• A circle needs equal width and height with border-radius: 50%.
• Use a big value like 999px for a pill shape.

---

CSS circle and pill button

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #e53935;
  }
  .pill {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    background: #43a047;
    color: white;
  }
</style>

<div class="circle"></div>
<span class="pill">Pill button</span>

Output in the browser:

How it works

• 50% rounds each corner by half of the side, so a square becomes a circle.
• A very big radius on a wide box rounds the short sides fully, which gives a pill.

Read Rounded Corners in CSS.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.