Brian Gilham

Engineering leader, husband, and father

How to round the corners of a WKInterfaceImage

(Originally published at FiveMinuteWatchKit.com, before the release of watchOS 2) The Human Interface Guidelines recommend using black as the background colour across your entire app. Why? It allows the background to blend in with the bezel surrounding the display, giving the illusion there isn’t a bezel at all. In my experience, rounding the corners of your full-width images can help this illusion. A quick look at the WKInterfaceImage class reference, however, might make you think this isn’t possible.

(Originally published at FiveMinuteWatchKit.com, before the release of watchOS 2)

The Human Interface Guidelines recommend using black as the background colour across your entire app. Why? It allows the background to blend in with the bezel surrounding the display, giving the illusion there isn’t a bezel at all.

In my experience, rounding the corners of your full-width images can help this illusion. A quick look at the WKInterfaceImage class reference, however, might make you think this isn’t possible. Where’s the setCornerRadius: property?

It isn’t possible. Not directly, anyway.

Poking around, you’ll notice that WKInterfaceGroup does have a setCornerRadius: method. Place your WKInterfaceImage inside a group, set the corner radius, and you’ll notice it clips the corners of your image beautifully.