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.

Possible duplicate of [Set a border for UIButton in Storyboard](http://stackoverflow.com/questions/20477990/set-a-border-for-uibutton-in-storyboard) — bummi, Mar 08 '16 at 05:26

Woraphot Chokratanasombat · Accepted Answer · 2016-07-26T09:07:54.443

314

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:

edited Jul 26 '16 at 09:07

answered Dec 11 '15 at 03:11

Woraphot Chokratanasombat

3,331
1
11
13

where can i add User Defined Runtime Attributes? – Henson Fang Dec 11 '15 at 03:17
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 – Woraphot Chokratanasombat Dec 11 '15 at 03:23
1

Can you make the border radius dynamic so it's always 50% of the width or does it need to be a static integer? – Crashalot Dec 11 '15 at 10:24
1

As far as I know, fixed value only. – Woraphot Chokratanasombat Dec 11 '15 at 14:55
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. – Crashalot Dec 12 '15 at 04:14
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. – Woraphot Chokratanasombat Dec 12 '15 at 06:26
is it possible to add TopLeft, TopRIght, BottomLeft, BottomRight radii using this method? – Saravanabalagi Ramachandran Jun 18 '16 at 04:50
@Zeka Dran I don't know about individual value but if it has same value you can use this method to set border radius. – Woraphot Chokratanasombat Jun 19 '16 at 06:17
@Crashalot: Did you ever get this working on a normal UIView? I also tried this on a normal UIView and nothing happened. – Rob Johansen Jul 15 '16 at 22:14
@AlienBishop I have just tried a minute ago and it works fine. Are you missing some value in 'User Defined Runtime Attributes'. [Screenshot](https://s32.postimg.org/5m1r7npt1/Screen_Shot_2016_07_17_at_08_18_25.png) – Woraphot Chokratanasombat Jul 17 '16 at 01:22
how do we enable 'clip subviews'? I don't see the option in the image – mfaani Jul 25 '16 at 19:53
@Honey I highlight the 'clip subviews' so it's standout now – Woraphot Chokratanasombat Jul 26 '16 at 09:03
2

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. – Code Knox Apr 02 '18 at 18:14
when my height and width are not the same then it's not working. could you suggest any alternative for it? Thanks! – Yogesh Patel Jan 27 '21 at 14:33
Almost makes programmatic GUI seem easier as already making much of it programmatically in storyboards anyway. – 01GOD Apr 27 '21 at 22:41

NRitH · Answer 2 · 2017-08-01T04:24:36.460

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.

Can you make the border radius dynamic so it's always 50% of the width or does it need to be a static integer? — Crashalot, Dec 11 '15 at 20:59
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. — NRitH, Dec 11 '15 at 21:28
@NRitH, I would be interested to see something like that. Do you think you can post the code here? — Cobie Fisher, Jul 31 '17 at 22:02

score 25 · Answer 3 · edited Nov 05 '21 at 00:32

25

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
        }
    }
}

edited Nov 05 '21 at 00:32

pkamb

33,281
23
160
191

answered Apr 23 '18 at 17:47

Ananda Aiwale

309
3
3

5

why use cornerRadiusV instead of cornerRadius? – luhuiya Aug 07 '18 at 04:26
1

it is set cornerRadius using the storyboard through, save the writing coding in Project – Ananda Aiwale Oct 05 '18 at 12:08

score 1 · Answer 4 · answered Jun 12 '19 at 09:35

1

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

answered Jun 12 '19 at 09:35

swiftBoy

35,607
26
136
135

This does not attempt to answer the question and is just a duplicate of your [other answer here](https://stackoverflow.com/a/56558934/1032372). – shim Feb 10 '20 at 17:49

score 1 · Answer 5 · answered Sep 22 '22 at 13:54

1

You have to connect your view to your code file and then

yourView.layer.cornerRadius = yourView.frame.width / 2
yourView.layer.masksToBounds = true

answered Sep 22 '22 at 13:54

Abdul Samad

31
2

Use Storyboard to mask UIView and give rounded corners?

5 Answers5

This worked for me :

Rounded Corners of UIView/UIButton etc

Border Thickness

Border Color

Linked