Use Storyboard to mask UIView and give rounded corners?

Question

Lots of questions like this explain how to programmatically create a mask and provide rounded corners to a UIView.

Is there a way to do it all within Storyboard? Just asking because it seems like creating rounded corners in Storyboard keeps a clearer demarcation between presentation and logic.

Solution 1

Yes, I use that a lot but question like this was already answered many times.

But anyway in Interface Builder. You need to add User Defined Runtime Attributes like this:

layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}

and enable

Clips subviews

Results:

Solution 2

You can do it in a storyboard by using user-defined properties. Select the view that you want to round and open its Identity Inspector. In the User Defined Runtime Attributes section, add the following two entries:

• Key Path: layer.cornerRadius, Type: Number, Value: (whatever radius you want)
• Key Path: layer.masksToBounds, Type: Boolean, Value: checked

You may have to import QuartzKit in your view's corresponding class file (if any), but I swear that I've gotten it to work without doing that. Your results may vary.

EDIT: Example of a dynamic radius

extension UIView {

    /// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
    /// to its width. For example, a 50% radius would be specified with
    /// `cornerRadiusRatio = 0.5`.
    @IBDesignable public var cornerRadiusRatio: CGFloat {
        get {
            return layer.cornerRadius / frame.width
        }

        set {
            // Make sure that it's between 0.0 and 1.0. If not, restrict it
            // to that range.
            let normalizedRatio = max(0.0, min(1.0, newValue))
            layer.cornerRadius = frame.width * normalizedRatio
        }
    }

}

I verified that this works in a playground.

Solution 3

Use IBInspectable to add the properties to the Storyboard:

extension UIView {
    
    @IBInspectable var cornerRadiusV: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable var borderWidthV: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    
    @IBInspectable var borderColorV: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

Solution 4

Even after making all changes in storyboard, Woraphot's answer doesn't work for me.

This worked for me :

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

---

Long answer :

Rounded Corners of UIView/UIButton etc

customUIView.layer.cornerRadius = 10

Border Thickness

pcustomUIView.layer.borderWidth = 1

Border Color

customUIView.layer.borderColor = UIColor.blue.cgColor

View more solutions

Comments

[bummi]

Possible duplicate of Set a border for UIButton in Storyboard

[Henson Fang]

where can i add User Defined Runtime Attributes?

[Woraphot Chokratanasombat]

As I show in first image select view then on the right pane select third icon User Defined Runtime Attributes Click item below to add key path, type, value

[Crashalot]

Can you make the border radius dynamic so it's always 50% of the width or does it need to be a static integer?

[Woraphot Chokratanasombat]

As far as I know, fixed value only.

[Crashalot]

Can you make the border radius dynamic so it's always 50% of the width or does it need to be a static integer?

[NRitH]

You can, but only in code. An interesting workaround, though, is to add an IBInspectable property to your view's class that's a numeric value between 0 and 100 and indicates the percentage of the width that the radius should be. For example, a value of 50 means that the radius should be 50% of the width. Because it's a computed (not stored) property, you can even add it to an extension of UIView so that all views can have the property.

[Crashalot]

This works on a normal UIView, or do we need to create a custom class that subclasses from UIView? We tried this on a normal UIView, and nothing happened.

[Woraphot Chokratanasombat]

Any view you name it be UIImageView, UITableCellView, UIView, UILabel or sub class from them even view that has many subviews. Can you check your User Defined Runtime Attributes and/or Clips Subviews again.

[Saravanabalagi Ramachandran]

is it possible to add TopLeft, TopRIght, BottomLeft, BottomRight radii using this method?

[Woraphot Chokratanasombat]

@Zeka Dran I don't know about individual value but if it has same value you can use this method to set border radius.

[Rob Johansen]

@Crashalot: Did you ever get this working on a normal UIView? I also tried this on a normal UIView and nothing happened.

[Woraphot Chokratanasombat]

@AlienBishop I have just tried a minute ago and it works fine. Are you missing some value in 'User Defined Runtime Attributes'. Screenshot

[mfaani]

how do we enable 'clip subviews'? I don't see the option in the image

[Woraphot Chokratanasombat]

@Honey I highlight the 'clip subviews' so it's standout now

[Cobie Fisher]

@NRitH, I would be interested to see something like that. Do you think you can post the code here?

[Code Knox]

Just FYI, if like me you came here thinking this would work on the LaunchScreen.storyboard, it does not. You will get: Error: Launch screens may not use user defined runtime attributes. Looks like if you need a round image on the LaunchScreen, you are out of options.

[luhuiya]

why use cornerRadiusV instead of cornerRadius?

[Ananda Aiwale]

it is set cornerRadius using the storyboard through, save the writing coding in Project

[shim]

This does not attempt to answer the question and is just a duplicate of your other answer here.

[Yogesh Patel]

when my height and width are not the same then it's not working. could you suggest any alternative for it? Thanks!

[01GOD]

Almost makes programmatic GUI seem easier as already making much of it programmatically in storyboards anyway.