Setting masked corners in Interface Builder

Question

What type of value is [.layerMaxXMinYCorner, .layerMinXMinYCorner]? Is it possible to set this parameter on a View in Interface Builder? I know how to set layer.borderWidth, layer.borderUIColor and layer.cornerRadius in the Identity Inspector, but I can't figure out the right Type and Value to use for masked corners.

Thanks!

Jake

---

Update: here are the integer values for each combination (in terms of which are rounded):

• 0: no rounded corners
• 1: top left
• 2: top right
• 3: top left & right (both top corners)
• 4: bottom left
• 5: top & bottom left (both left corners)
• 6: top right & bottom left
• 7: top left & right, bottom left (all corners except bottom right)
• 8: bottom right
• 9: top left, bottom right
• 10: top & bottom right (both right corners)
• 11: both top corners, bottom right (all corners except bottom left)
• 12: bottom left & right (both bottom corners)
• 13: bottom left & right, top left (all corners except top right)
• 14: bottom left & right, top right (all corners except top left)
• 15: all corners rounded

---

• Top left is in 1, 3, 5, 7, 9, 11, 13, 15
• Top right is in 2-3, 6-7, 10-11, 14-15
• Bottom left is in 4-7, 12-15

• Bottom right is in 8-15

• Both top corners are in 3, 7, 11, 15

• Both right corners are in 10-11, 14,15
• Both bottom corners are in 12-15
• Both left corners are in 5, 7, 13, 15

Answer 1

maskedCorners is a CACornerMask, which is an OptionSet, or bit mask. The raw value is an integer: in code, you can try printing the value of someView.layer.maskedCorners.rawValue, or setting it via someView.layer.maskedCorners.setValue(3, forKey: "maskedCorners").

So you should be able to set the value of layer.maskedCorners to the integer 3 (or whatever you need) in Interface Builder, and I don't see why it would be unsafe to do this. Though it will be a pain to figure out what set of corners that integer value actually maps to if you forget.

Answer 2

I've just randomly bumped into this same "issue" and wrote another solution, using an extension (no subclassing) and visual toggles in IB for each corner (without setting / adding the bit flags manually).

Keep in mind that the default settings are On / true (so that "cornerRadius" affects all corners of the view). If you want to round all corners except one, just set that particular corner to false.

import UIKit

@IBDesignable
public extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set { layer.cornerRadius = newValue }
    }

    @IBInspectable var topLeft: Bool {
        get { return layer.maskedCorners.contains(.layerMinXMinYCorner) }
        set {
            if newValue {
                layer.maskedCorners.insert(.layerMinXMinYCorner)
            } else {
                layer.maskedCorners.remove(.layerMinXMinYCorner)
            }
        }
    }

    @IBInspectable var topRight: Bool {
        get { return layer.maskedCorners.contains(.layerMaxXMinYCorner) }
        set {
            if newValue {
                layer.maskedCorners.insert(.layerMaxXMinYCorner)
            } else {
                layer.maskedCorners.remove(.layerMaxXMinYCorner)
            }
        }
    }

    @IBInspectable var bottomLeft: Bool {
        get { return layer.maskedCorners.contains(.layerMinXMaxYCorner) }
        set {
            if newValue {
                layer.maskedCorners.insert(.layerMinXMaxYCorner)
            } else {
                layer.maskedCorners.remove(.layerMinXMaxYCorner)
            }
        }
    }

    @IBInspectable var bottomRight: Bool {
        get { return layer.maskedCorners.contains(.layerMaxXMaxYCorner) }
        set {
            if newValue {
                layer.maskedCorners.insert(.layerMaxXMaxYCorner)
            } else {
                layer.maskedCorners.remove(.layerMaxXMaxYCorner)
            }
        }
    }
}