How to Create Border Radius Inside (Inset Corners) in React Native

Most of the time in React Native, we only use the usual borderRadius to round the outside of a view or an image. But what if you want the opposite — corners that cut inside the view so the edges look like they’ve been removed?

Here is the sample image as below

This is not built in directly, but you can achieve the same effect in a few different ways.

Here are three practical approaches that developers usually use:

1. Overlay Small Views at the Corners

The simplest trick is to place small circular views at each corner to hide the edges. It’s like faking the inside radius by covering it up.

<View style={styles.box}>
  <View style={styles.innerBox}>
    <Image
      source={{ uri: 'https://picsum.photos/400' }}
      style={styles.image}
    />
  </View>

  {/* Four corner overlays */}
  <View style={[styles.topLeft, styles.corner]} />
  <View style={[styles.topRight, styles.corner]} />
  <View style={[styles.bottomLeft, styles.corner]} />
  <View style={[styles.bottomRight, styles.corner]} />
</View>

With styles:

corner: {
  position: 'absolute',
  width: 20,
  height: 20,
  borderRadius: 10,
  backgroundColor: 'black', // or parent background
},
topLeft: { left: -10, top: -10 },
topRight: { right: -10, top: -10 },
bottomLeft: { left: -10, bottom: -10 },
bottomRight: { right: -10, bottom: -10 },

This works fine if your layout is a fixed size. The only drawback is that you’ll need to adjust sizes manually if the box changes.

2. Use an SVG Mask

If you want something cleaner and more flexible, go with react-native-svg. With an SVG mask, you can literally “cut out” the corners so they become transparent.
But first, you need to install react-native-svg by

npm install react-native-svg

Here is the code

The nice part is you get real transparent corners, and it scales well. The only catch is you’ll need the extra dependency (react-native-svg), but Expo already has it built in.

3. Use a Pre-Made Image from a Designer

If your design is fixed and doesn’t need to scale, the easiest option might just be asking your designer for a PNG or SVG with transparent corners. You can then drop it in with or and put your content inside.
This won’t work if you need dynamic resizing, but for static UI it’s often the simplest approach.

Which One Should You Use?

• If you need a quick hack and fixed sizing → overlay corner views.
• If you want something scalable and reusable → go with the SVG mask.
• If your UI is static and designer-driven → ask for a cut-out image asset.

I’d recommend the SVG solution. It’s clean, it scales, and you can tweak the radius easily in code without fiddling with overlays.

Also Read:

React Native Image Zoom Viewer