Published Dec 25, 2022
Contribute to Docs

A Capsule shape is essentially a rounded rectangle with a more pronounced corner radius which gets measured by halving the rectangle’s smallest side.

The Capsule is one of SwiftUI pre-built shapes like rectangle, rounded rectangle, circle, and ellipse which can be modified as desired.


var body: some View {
        // Modifiers here


The following example creates a Capsule:

var body: some View {
Capsule(style: .continuous)
.frame(width: 250, height: 50)
  • (style: .continuous) makes the shape look more natural to the eye by giving continuity to the rounded borders.
  • (style: .circular) is another styling attribute capsules have and the outcome looks sharper on the screen.

Swift will assign a circular style automatically when no style attribute is specified.

The code-block above will display a Capsule filled with the color red and set a frame that is 250 points wide and 50 points high.

This will display the following:


All contributors

Looking to contribute?

Learn SwiftUI on Codecademy