Introduction

Creating a rounded button in Storyboard is an essential skill for iOS developers to enhance the appearance and user experience of an application. Storyboard is part of Apple's Xcode IDE, featuring a drag-and-drop interface for designing user interfaces visually. In this article, we'll guide you through the process of creating a simple rounded button using Storyboard, complete with technical explanations and examples.

Create a UIButton

First, you'll need to create a `UIButton` in your Storyboard. Here are the steps to do this:

1. Open Xcode and create a new or open an existing iOS project.
2. Navigate to the Storyboard file, usually named `Main.storyboard`.
3. Drag a UIButton from the Object Library into your view controller on the Storyboard.

Customize the UIButton

To make the button rounded, you'll need to adjust its `layer` property, specifically the `cornerRadius`. Here's how you can do this:

Step-by-Step Instructions

1. Select the UIButton on your Storyboard.
2. Open the Identity Inspector (on the right sidebar) and make sure that your button class is set to `UIButton`.
3. Switch to the Attributes Inspector and change the button's properties like title, background color, etc., as desired.
4. Open the Assistant Editor by clicking the overlapping circles icon at the top right corner. This will allow you to see both your Storyboard and related ViewController code.
5. Control-drag from your button to the ViewController code to create an IBOutlet. Name it `roundedButton`. This connection allows interfacing between the Storyboard and the code.

Implement Rounded Corners in Code

You'll now add the code to make the button's corners rounded:

• `layer.cornerRadius`: The `layer` property of a `UIView` provides access to adjust its appearance. Setting the `cornerRadius` property modifies the radius of the button's corners.
• `clipsToBounds`: Set to `true` to ensure any subview content does not exceed the bounds of the button.
• Border: Add a border to the button using `roundedButton.layer.borderWidth` and `roundedButton.layer.borderColor`.
• Shadow: Create a shadow using properties like `roundedButton.layer.shadowColor`, `roundedButton.layer.shadowOpacity`, and `roundedButton.layer.shadowOffset`.