# How to make content of rectangle ClipToBounds?

**URL:** <https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276>\
**Category:** How-to Discussions\
**Created:** [March 16, 2018, 7:43am UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276 "2018-03-16T07:43:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [March 16, 2018, 7:43am UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/1 "2018-03-16T07:43:17Z")

</div>

`Fuse version 1.7.3 (build 15528)`

- I’ve specified `ClipToBounds="true"` for `<Rectangle>` but still I see content outside of it’s rounded corners.
- Is it possible to fix this?

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/xuNDMwojZa8r-image-1521186045983.png)

```auto
<!--suppress ALL -->
<App>
    <Rectangle ux:Class="CardPage" CornerRadius="50" Color="#f23" ClipToBounds="true">
    </Rectangle>

    <DockPanel>
        <CardPage Y="50" Height="100%" Width="80%">
            <ScrollView>
                <StackPanel>
                    <Text Value="I'm a text"/>
                    <Image File="img/location-image.jpg"/>
                    <Text Value="I'm a text"/>
                </StackPanel>
            </ScrollView>
        </CardPage>
    </DockPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [March 16, 2018, 8:44am UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/2 "2018-03-16T08:44:11Z")

</div>

`Rectangle` is not a clipping mask. If you want to get an image with rounded corners, you can use `ImageFill` brush to fill a shape, instead of putting an `Image` right inside of one.

---

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [March 16, 2018, 9:58am UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/3 "2018-03-16T09:58:40Z")

</div>

> **Bent Stamnes wrote:**
> 
> `Rectangle` is not a clipping mask. If you want to get an image with rounded corners, you can use `ImageFill` brush to fill a shape, instead of putting an `Image` right inside of one.

Yes I know I can make an image with rounded corners, but I want text to clip also. The idea is to have scroll view within rectangle (or some other type of container) with rounder corners which should be clipped properly.

---

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [March 16, 2018, 11:41am UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/4 "2018-03-16T11:41:02Z")

</div>

I’ve read more on forums and found out about `Mask`

Here are my results:

```auto
<!--suppress ALL -->
<App>
    <Rectangle ux:Class="CardPage" Color="#fff" CornerRadius="15">
        <DropShadow Color="#333" Distance="-3"/>
        <Mask Mode="Alpha" File="img/card-mask.png" />
    </Rectangle>

    <StackPanel ux:Class="Content">
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Image File="img/location-image.jpg"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
    </StackPanel>

    <DockPanel>
        <CardPage Y="50" Height="100%" Width="100%">
            <ScrollView>
                <StackPanel>
                    <Each Count="10">
                        <Content/>
                    </Each>
                </StackPanel>
            </ScrollView>
        </CardPage>
    </DockPanel>
</App>

```

Mask:

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/rxpsqAsAIQSR-image-1521200029705.png)

Text is clipped properly:

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/zeNyLV3RBiVS-image-1521200109343.png)

Image is clipped properly but it affects the `DropShadow`:

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/b1it1buIHPxo-image-1521200141670.png)

YouTube Video:

- Is that possible to fix drop shadow issue?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [March 16, 2018, 12:15pm UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/5 "2018-03-16T12:15:44Z")

</div>

Pavel, you have correctly found that you can use `Mask` for what you wanted to achieve. However, I have to point out that what you’re doing is highly inefficient.

The use of `DropShadow` in particular has been discouraged for a long time now, since it’s very performance intensive, and a faster `Shadow` is the recommended approach. Of course, `Shadow` does not do “rounded corners” as `DropShadow` does, but that’s the whole point.

As for the shadow-challenge you have. If you don’t mind making a super slow app, I guess you could have 2 instances of that `Mask`, one just with the `DropShadow` applied, and another on top of it for the clipping. Not that I think you should do this.

---

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [March 16, 2018, 12:16pm UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/6 "2018-03-16T12:16:30Z")

</div>

**SOLVED**

- The idea is to drop shadow from `Underlay` layer.
- And having clipping mask in another internal `Rectangle`
- **Another question** : Is that possible to specify clipping mask using some curves? Or I’m limited to raster mask only? PNG clipping mask works great, I event tried mask with higher resolution but still I’d like to have better clipping quality on rounded edges.

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/lH1EiN9ipBrB-image-1521202411419.png)

```auto
<!--suppress ALL -->
<App>
    <DockPanel ux:Class="CardPage" >
        <Rectangle Layer="Underlay" Color="#fff" CornerRadius="20">
            <DropShadow Color="#555" Distance="-3" Spread="0" Size="4"/>
        </Rectangle>
        <Rectangle>
            <Mask Mode="Alpha" File="img/card-mask.png" />
            <ScrollContent />
        </Rectangle>
    </DockPanel>

    <StackPanel ux:Class="Content">
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Image File="img/location-image.jpg"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
    </StackPanel>

    <ScrollView ux:Class="ScrollContent">
        <StackPanel>
            <Each Count="10">
                <Content/>
            </Each>
        </StackPanel>
    </ScrollView>

    <DockPanel>
        <CardPage Y="50" Height="100%" Width="100%">

        </CardPage>
    </DockPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [March 16, 2018, 12:19pm UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/7 "2018-03-16T12:19:35Z")

</div>

> **[poul.kg@gmail.com](mailto:poul.kg@gmail.com) wrote:**
> 
> - **Another question** : Is that possible to specify clipping mask using some curves?

No, shapes in Fuse are not clipping masks. All you have is `Mask`.

And, still, what you’ve done is neither effective nor recommended.

---

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [March 16, 2018, 5:08pm UTC](https://forums.fusetools.com/t/how-to-make-content-of-rectangle-cliptobounds/5276/8 "2018-03-16T17:08:40Z")

</div>

**Uldis**

thanks for you notes about impact on performance