--- title: "Button Border Shape | Explore SwiftUI" description: "A shape used to draw a button’s border. Learn how to use Button Border Shape in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." canonical_url: "https://exploreswiftui.com/library/button/button-border-shape" meta: author: "Explore SwiftUI" "og:description": "A shape used to draw a button’s border. Learn how to use Button Border Shape in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Button%2BBorder%2BShape%2Cdescription_~QSBzaGFwZSB1c2VkIHRvIGRyYXcgYSBidXR0b27igJlzIGJvcmRlci4%2Ccategory_Button%2Cimage_~L2FwaS9pbWFnZXMvMzIvdmFyaWFudHMvMTc5P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2J1dHRvbi9idXR0b24tYm9yZGVyLXNoYXBlIg%2Cs_Vr5gRC8-qZ-Bvsa8.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Button Border Shape | Explore SwiftUI" "twitter:description": "A shape used to draw a button’s border. Learn how to use Button Border Shape in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Button%2BBorder%2BShape%2Cdescription_~QSBzaGFwZSB1c2VkIHRvIGRyYXcgYSBidXR0b27igJlzIGJvcmRlci4%2Ccategory_Button%2Cimage_~L2FwaS9pbWFnZXMvMzIvdmFyaWFudHMvMTc5P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2J1dHRvbi9idXR0b24tYm9yZGVyLXNoYXBlIg%2Cs_Vr5gRC8-qZ-Bvsa8.png" "twitter:title": "Button Border Shape | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=32) # **Button Border Shape** A shape used to draw a button’s border. ![Button Border Shape - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/32/variants/179?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 15.0+ iPadOS 15.0+ macOS 12.0+ watchOS 8.0+ tvOS 15.0+ visionOS 1.0+ ### **SwiftUI Code** [ Docs](https://developer.apple.com/documentation/swiftui/buttonbordershape) ``` HStack { Button("Tap Me", action: action) .buttonStyle(.borderedProminent) .buttonBorderShape(.roundedRectangle) Button("Tap Me", action: action) .buttonStyle(.borderedProminent) .buttonBorderShape(.capsule) Button("Tap Me", action: action) .buttonStyle(.borderedProminent) .padding() .buttonBorderShape(.circle) Button("Tap Me", action: action) .buttonStyle(.borderedProminent) .buttonBorderShape(.roundedRectangle(radius: 12)) } ``` ### **Found an issue or have a suggestion?** Created: May 30, 2025Updated: December 27, 2025 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More Button Components ** [**View all **](https://exploreswiftui.com/library/button) ![Button Sizing - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/190/variants/3?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Sizing** The preferred sizing behavior of buttons in the view hierarchy. ![Role Button With Default Label - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/134/variants/424?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Role Button With Default Label** Creates a button that displays a default label. ![Glass Button Styles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/87/variants/314?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Glass Button Styles** A button style that applies glass border artwork based on the button’s context ![RenameButton - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/37/variants/213?v=1790073478842&r=2&w=412&q=75&f=webp) ### **RenameButton** A button that triggers a standard rename action ![EditButton - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/36/variants/239?v=1790073478842&r=2&w=412&q=75&f=webp) ### **EditButton** A button that toggles the edit mode environment value ![PasteButton - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/35/variants/235?v=1790073478842&r=2&w=412&q=75&f=webp) ### **PasteButton** A system button that reads items from the pasteboard and delivers it to a closure. ![Button Tint - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/34/variants/408?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Tint** Sets the buttons tint color ![Button Roles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/33/variants/718?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Roles** A value that describes the purpose of a button. ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Content Unavailable - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/4/variants/37?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Content Unavailable** A placeholder for empty results with optional button ![ToolbarItem Shared Background Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/92/variants/295?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ToolbarItem Shared Background Visibility** Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping ![ToolbarSpacer - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/82/variants/106?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ToolbarSpacer** A standard space item in toolbars ![Item Sheet - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/136/variants/448?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Item Sheet** Presents a sheet using the given item as a data source for the sheet’s content. On watchOS, sheets are displayed as fullScreenCover. ![PaletteControlGroupStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/57/variants/49?v=1790073478842&r=2&w=412&q=75&f=webp) ### **PaletteControlGroupStyle** A control group style that presents its content as a palette. ![ProgressView - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/78/variants/65?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ProgressView** The different ProgressView initializers ![List Badge Prominence - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/124/variants/353?v=1790073478842&r=2&w=412&q=75&f=webp) ### **List Badge Prominence** Specifies the prominence of badges created by this view. ![Color Variants - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/9/variants/209?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Color Variants** HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/button/button-border-shape#webpage","@type":"WebPage","dateModified":"2025-12-27T17:37:40.209Z","datePublished":"2025-05-30T13:53:11.820Z","description":"A shape used to draw a button’s border. Learn how to use Button Border Shape in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Button Border Shape","url":"https://exploreswiftui.com/library/button/button-border-shape","breadcrumb":{"@id":"https://exploreswiftui.com/library/button/button-border-shape#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/button/button-border-shape"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/button/button-border-shape#article","dateModified":"2025-12-27T17:37:40.209Z","datePublished":"2025-05-30T13:53:11.820Z","description":"A shape used to draw a button’s border. Learn how to use Button Border Shape in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","headline":"Button Border Shape","inLanguage":"en-US","name":"Button Border Shape","thumbnailUrl":"https://exploreswiftui.com/api/images/32/variants/179?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/button/button-border-shape","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/button/button-border-shape#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/button/button-border-shape#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/buttonbordershape","codeSampleType":"full example","description":"A shape used to draw a button’s border. Learn how to use Button Border Shape in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Button Border Shape SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"HStack {\n Button(\"Tap Me\", action: action)\n .buttonStyle(.borderedProminent)\n .buttonBorderShape(.roundedRectangle)\n Button(\"Tap Me\", action: action)\n .buttonStyle(.borderedProminent)\n .buttonBorderShape(.capsule)\n Button(\"Tap Me\", action: action)\n .buttonStyle(.borderedProminent)\n .padding()\n .buttonBorderShape(.circle)\n Button(\"Tap Me\", action: action)\n .buttonStyle(.borderedProminent)\n .buttonBorderShape(.roundedRectangle(radius: 12))\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Button"},{"@type":"Thing","name":"Button Border Shape"}]},{"@id":"https://exploreswiftui.com/library/button/button-border-shape#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Button","item":"https://exploreswiftui.com/library/button","position":2},{"@type":"ListItem","name":"Button Border Shape","item":"https://exploreswiftui.com/library/button/button-border-shape","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/32/variants/179?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/32/variants/179?v=1790073478842&r=2"}]} ```