How do I make an UIImage/-View with rounded corners CGRect (Swift)

Question

How do I make a UIImageView with rounded corners on a Swift iOS Playground?
Inside it needs to be filled with a color.

You can also Rounded particular edge : https://iosdevcenters.blogspot.com/2018/02/how-to-set-roundcorner-radius-on-view.html — Bhadresh, Jun 06 '18 at 03:14

score 191 · Accepted Answer · answered Aug 24 '14 at 20:46

191

let imageView = UIImageView(frame: CGRectMake(0, 0, 100, 100))
imageView.backgroundColor = UIColor.redColor()
imageView.layer.cornerRadius = 8.0
imageView.clipsToBounds = true

Result:

enter image description here

answered Aug 24 '14 at 20:46

Mundi

79,884
17
117
140

1

what if we want to round the UIImage not UIImageView ???? – Arslan Kaleem Mar 28 '22 at 14:25
If you round the ImageView, the image will appear round. Same result. – Mundi Mar 28 '22 at 18:07
@Arslan, see [stackoverflow.com/questions/70252577](https://stackoverflow.com/questions/70252577), if you want to round the UIImage, rather than the UIImageView. – P. Stern May 25 '23 at 20:46

score 30 · Answer 2 · edited Apr 15 '21 at 08:20

For rounded circle image frame in swift, what it worked for me was:

self.profileImageView.image =  UIImage(named:"profileUser")
self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
self.profileImageView.clipsToBounds = true

And for adding a shadow:

self.profileImageView.layer.masksToBounds = NO;
self.profileImageView.layer.cornerRadius = 8;
self.profileImageView.shadowOffset = CGSizeMake(5.0, 5.0);
self.profileImageView.shadowRadius = 5;
self.profileImageView.shadowOpacity = 0.5;

score 23 · Answer 3 · edited Aug 12 '15 at 07:05

23

Try this, it worked for me.

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
self.profileImageView.clipsToBounds = true

edited Aug 12 '15 at 07:05

vladasha

403
8
15

answered Jan 16 '15 at 21:13

TheRealRonDez

2,807
2
30
40

score 14 · Answer 4 · answered Apr 25 '16 at 19:25

I was tired of writing set radius and mask to bound for each UIView. So I made the following extenstion for UIView. Should work for every UIView subclass, though I have not tested it. The extension can be narrowed down for specific Views you use of course.

extension UIView {      
    func setRadius(radius: CGFloat? = nil) {
        self.layer.cornerRadius = radius ?? self.frame.width / 2;
        self.layer.masksToBounds = true;
    }
}

It will default to the view's half width if you don't pass it any specific value.

score 10 · Answer 5 · answered Aug 23 '18 at 17:45

10

Swift 3.0, 4.0

If you want to use the storyboard. I applied this and make sure that "Clip to bounds" is enable.

answered Aug 23 '18 at 17:45

A. Trejo

641
8
17

score 4 · Answer 6 · edited Jul 16 '18 at 10:31

If you want to have an option to round each UIImageView, you can copy this code into your project without forgetting to check clip to bounds and set its value to true

import UIKit

@IBDesignable
extension UIImageView
{
    private struct AssociatedKey
    {
        static var rounded = "UIImageView.rounded"
    }

    @IBInspectable var rounded: Bool
    {
        get
        {
            if let rounded = objc_getAssociatedObject(self, &AssociatedKey.rounded) as? Bool
            {
                return rounded
            }
            else
            {
                return false
            }
        }
        set
        {
            objc_setAssociatedObject(self, &AssociatedKey.rounded, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            layer.cornerRadius = CGFloat(newValue ? 1.0 : 0.0)*min(bounds.width, bounds.height)/2
        }
    }
}

screenshot

you can also add `self.clipsToBounds = true` in the setter to not have to worry about setting it in the interface builder — Quinn, Feb 08 '19 at 03:55

score 2 · Answer 7 · answered Aug 17 '19 at 09:51

Swift 5.0:

My personal preference is to have an extra swift file for specific changes like this one. What I do is then create a class e.g. "RoundCorner" which is a subclass of the element I want to change in this case a View element. And then I am overriding the individual settings.

class RoundCorner: UIView {
override func draw(_ rect: CGRect) {
    self.layer.cornerRadius = 10 // change this number to get the corners you want
    self.layer.masksToBounds = true
    }
}

After that, you only have to select the element you want this changes on, and set the custom class to the class we created earlier.

Look at the screenshot here

score 1 · Answer 8 · answered Oct 11 '18 at 05:11

1

Setting layer.cornerRadius = 10 at User Defined Runtime Attributes section on the Identity inspector works even on repeatable elements like table cells.

answered Oct 11 '18 at 05:11

Daniel Miranda

371
2
5

score 1 · Answer 9 · answered Oct 31 '21 at 17:20

In Swift 4 you can do it fairly easily like this:

yourUIImage.layer.cornerRadius = 10 // Set it how you prefer
yourUIImage.layer.masksToBounds = true

And if you use a rather long rectangle image, for example for a featured content part in your app or whatever, make sure the Content Mode is set to Scale To Fit because otherwise the corners will be somehow rounded but will cut badly and it will not be a perfect round corner but rather a rounded, then sharp cut where it clips.

UIImage, dont even have layer... – erotsppa Mar 24 '23 at 01:25 — erotsppa, Mar 24 '23 at 01:25

score 0 · Answer 10 · answered Jun 03 '22 at 13:14

0

in your viewDidload add this line of code

self.headerImageView.layer.cornerRadius = self.headerImageView.frame.size.width / 2

answered Jun 03 '22 at 13:14

UsamaDev

21
1
3

How do I make an UIImage/-View with rounded corners CGRect (Swift)

10 Answers10

Linked