Webflow
Webflow is a no-code website builder with powerful CMS and design customization.
Website
Industry
Website
Share this article:

How to create a pill-shaped border in Webflow

Here is how to create a pill-shaped border in webflow

  1. First, click on the element where you want to add a border
  2. Then click on the "Style" tab in the right sidebar
  3. Next click on the "Borders" section in the right sidebar settings panel
  4. Then click on the "Unit Selector" in the Borders radius settings
  5. Next choose "PX" from the list
  6. Finally max out the slider to get the pill effect border

Create your own interactive guide with Guideflow

Why should you create a pill-shaped border in Webflow

Webflow is a versatile design tool that empowers you to create professional websites without writing code.

A unique feature in Webflow is the ability to craft pill-shaped borders effortlessly.

This design element can add a soft, modern touch to your web pages, enhancing user engagement.

Utilizing pill-shaped borders helps differentiate content sections and improve visual flow, making your site more aesthetically pleasing.

Last update
March 2, 2026
Cursor MariaA cursor points to a button labeled "James."

Create your first demo in less than 30 seconds.