CssHow-ToBeginner · 3 min read

How to Create Pill Shape in CSS: Simple Guide

To create a pill shape in CSS, use the border-radius property with a high value like 9999px on a rectangular element. This rounds the corners fully, making the shape look like a pill.

📐

Syntax

The main CSS property to create a pill shape is border-radius. Setting it to a very high value on a rectangular box rounds the corners completely.

border-radius: 9999px; makes the corners fully rounded.
The element should have a fixed height and enough width to look like a pill.
Padding or width controls the size of the pill.

css

.pill {
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  background-color: #4caf50;
  color: white;
  display: inline-block;
}

💻

Example

This example shows a green pill-shaped button with white text. The border-radius rounds the corners fully, and padding controls the size.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pill Shape Example</title>
<style>
  .pill {
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    background-color: #4caf50;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    display: inline-block;
    user-select: none;
  }
</style>
</head>
<body>
  <span class="pill">Pill Shape</span>
</body>
</html>

Output

A green pill-shaped label with white text 'Pill Shape' on a white background.

⚠️

Common Pitfalls

Common mistakes when creating pill shapes include:

Using a small border-radius value like 10px which only rounds corners slightly, not fully.
Not setting enough horizontal padding or width, so the shape looks like a circle or oval instead of a pill.
Applying border-radius to elements with equal height and width, which creates circles, not pills.

css

.wrong-pill {
  border-radius: 10px;
  padding: 0.5rem 0.5rem;
  background-color: #f44336;
  color: white;
  display: inline-block;
}

.correct-pill {
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  background-color: #4caf50;
  color: white;
  display: inline-block;
}

📊

Quick Reference

Tips for creating pill shapes in CSS:

Use border-radius: 9999px; for full rounding.
Ensure width is greater than height for pill shape.
Use padding to control size and spacing inside the pill.
Use display: inline-block; or inline-flex; to keep the shape inline.

✅

Key Takeaways

Use a very high border-radius value like 9999px to create fully rounded corners.

Make sure the element's width is larger than its height to form a pill shape.

Control the pill size with padding or width settings.

Avoid small border-radius values that only round corners slightly.

Use inline-block or inline-flex display to keep the pill shape inline with text.