# Video with rounded corners

**URL:** <https://forums.fusetools.com/t/video-with-rounded-corners/7994>\
**Category:** How-to Discussions\
**Created:** [January 28, 2020, 1:00pm UTC](https://forums.fusetools.com/t/video-with-rounded-corners/7994 "2020-01-28T13:00:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 28, 2020, 1:00pm UTC](https://forums.fusetools.com/t/video-with-rounded-corners/7994/1 "2020-01-28T13:00:55Z")

</div>

Hey guys,

how you can help me out here. I am currently trying to put a video in an element with round corners. But the video is ignoring the cornerradius of the parent and stretches to the full edge, is there a way to avoid this?

I tried it like this:

```
   <Rectangle Row="0" CornerRadius="20, 20, 0, 0" Width="100%" Dock="Top">
      <Video Url="VIDEOURL" AutoPlay="true" IsLooping="true" StretchMode="UniformToFill" />
   </Rectangle>

```

Also searched for a CornerRadius option on the Video element or something like VideoFill (similar to ImageFill). Any ideas?

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 31, 2020, 9:32am UTC](https://forums.fusetools.com/t/video-with-rounded-corners/7994/2 "2020-01-31T09:32:23Z")

</div>

No ideas 😕?

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 31, 2020, 1:27pm UTC](https://forums.fusetools.com/t/video-with-rounded-corners/7994/3 "2020-01-31T13:27:21Z")

</div>

I was now able to solve this by using a Mask:

```
<Panel Layer="Overlay" Opacity="0">
  <Grid Rows="4*, 4*, 2*" Margin="25, 70, 25, 40">
    <Mask Mode="Alpha" File="../Assets/Images/mask.png" />
    <Rectangle Layer="Background" CornerRadius="20" Color="#FFFFFF" />

    <Rectangle Row="0" CornerRadius="20, 20, 0, 0" Width="100%" Dock="Top">
      <Video Url="VIDEOURL" AutoPlay="true" IsLooping="true" StretchMode="UniformToFill" />
    </Rectangle>

    <StackPanel Row="1" Padding="20">
      <Text Value="TEXT" TextAlignment="Center" FontSize="18" Dock="Top" TextWrapping="Wrap" />
      <Text Value="TEXT" TextAlignment="Center" FontSize="14" Dock="Top" TextWrapping="Wrap" />
    </StackPanel>
    <MyButton Row="2" Text="Close" Alignment="VerticalCenter" Clicked="{overlayClose}" Dock="Bottom" Margin="20" />
  </Grid>

  <Rectangle ux:Name="background" Color="#000000" Opacity="0.7"/>
</Panel>
```