> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/examples/.roundedborder.md).

# .roundedBorder()

[SwiftUI](/ios/swiftui.md) ⟩ [Views](/ios/swiftui/view.md) ⟩ [View Modifiers](/ios/swiftui/view/modifier/viewmodifier.md) ⟩ [examples](/ios/swiftui/view/modifier/examples.md) ⟩

{% tabs %}
{% tab title="🌀 .roundedBorder()" %}

```swift
import SwiftUI

// custom view modifier
struct RoundedBorderStyle: ViewModifier {
    
    // init variables
    var cornerRadius = 30.0
    
    // ⭐️ .dark / .light mode
    @Environment(\.colorScheme) var colorScheme     
    
    // ViewModifier protocol requirement
    func body(content: Content) -> some View {
        content.overlay(
            RoundedRectangle(
                cornerRadius: cornerRadius, 
                style: .continuous
            ).stroke(.linearGradient(
                colors: [
                    .white.opacity(colorScheme == .dark ? 0.6 : 0.3),
                    .black.opacity(colorScheme == .dark ? 0.3 : 0.1)
                ],
                startPoint: .top,
                endPoint  : .bottom
            ))
            .blendMode(.overlay)
        )
    }
}

extension View {
    public func roundedBorder(cornerRadius: Double = 30) -> some View {
        modifier(RoundedBorderStyle(cornerRadius: cornerRadius))
    }
}

```

{% endtab %}

{% tab title="📗 參考" %}

* Design+Code ⟩ [Reusable Style and Color Scheme](https://designcode.io/swiftui-ios15-reusable-style-color-scheme)
  {% endtab %}

{% tab title="👥 相關" %}

* [@Environment](/ios/swiftui/view/environment/environment.md)
  {% endtab %}
  {% endtabs %}