---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Rectangle
description: Rectangle element api.
---
import SlintProperty  from '/src/components/SlintProperty.astro';
import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';


<CodeSnippetMD imagePath="/src/assets/generated/rectangle-example.png" imageAlt='rectangle example'>
```slint playground
export component ExampleRectangle inherits Window {
    width: 200px; height: 800px; background: transparent;

    Rectangle {
        x: 10px; y: 10px;
        width: 180px;
        height: 180px;
        background: #315afd;
    }

    // Rectangle with a border
    Rectangle {
        x: 10px; y: 210px;
        width: 180px;
        height: 180px;
        background: green;
        border-width: 2px;
        border-color: red;
    }

    // Transparent Rectangle with a border and a radius
    Rectangle {
        x: 10px; y: 410px;
        width: 180px;
        height: 180px;
        border-width: 4px;
        border-color: black;
        border-radius: 30px;
    }

    // A radius of width/2 makes it a circle
    Rectangle {
        x: 10px; y: 610px;
        width: 180px;
        height: 180px;
        background: yellow;
        border-width: 2px;
        border-color: blue;
        border-radius: self.width/2;
    }
}
```
</CodeSnippetMD>

By default, a `Rectangle` is just an empty item that shows nothing. By setting a color or configuring a border,
it's then possible to draw a rectangle on the screen.

When not part of a layout, its width and height default to 100% of the parent element.

## Properties

### background
<SlintProperty propName="background" typeName="brush" defaultValue="transparent">
The background brush of this `Rectangle`.

<CodeSnippetMD imagePath="/src/assets/generated/rectangle-background.png"  imageWidth="200" imageHeight="400"  imageAlt='rectangle background'>
```slint
property <brush> rainbow-gradient: @linear-gradient(40deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%,rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);

Rectangle {
    x: 10px;
    y: 10px;
    width: 180px;
    height: 180px;
    background: #315afd;
}


Rectangle {
    x: 10px;
    y: 210px;
    width: 180px;
    height: 180px;
    background: rainbow-gradient;
}
```
</CodeSnippetMD>
</SlintProperty>

### border-color
<SlintProperty propName="border-color" typeName="brush" defaultValue="transparent">
<CodeSnippetMD imagePath="/src/assets/generated/rectangle-border-color.png"  imageWidth="200" imageHeight="200"  imageAlt='rectangle border-color'>
```slint
Rectangle {
    width: 200px;
    height: 200px;
    border-width: 10px;
    border-color: lightslategray;
}
```
</CodeSnippetMD>
The color of the border.
:::caution[Caution]
The default `border-width` is `0px`, so the border is invisible. After setting a color also ensure that the `border-width` is set to a non-zero value.
:::
</SlintProperty>

### border-width
<SlintProperty propName="border-width" typeName="length" defaultValue="0">
<CodeSnippetMD imagePath="/src/assets/generated/rectangle-border-width.png"  imageWidth="200" imageHeight="200"  imageAlt='rectangle border-width'>
```slint
Rectangle {
    width: 200px;
    height: 200px;
    border-width: 30px;
    border-color: lightslategray;
}
```
</CodeSnippetMD>
The width of the border.
</SlintProperty>

### clip
<SlintProperty propName="clip" typeName="bool" defaultValue="false">
<CodeSnippetMD skip="true" imagePath="/src/assets/generated/rectangle-clip.png"  imageWidth="200" imageHeight="400"  imageAlt='rectangle clip'>
```slint
// clip: false; the default
Rectangle {
    x: 50px; y: 50px;
    width: 150px;
    height: 150px;
    background: darkslategray;
    Text {
        text: "clip: false";
        font-size: 20pt;
        color: white;
    }
    Rectangle {
        x: -40px; y: -40px;
        width: 100px;
        height: 100px;
        background: lightslategray;
    }
}

// clip: true; Clips the children of this Rectangle
Rectangle {
    x: 50px; y: 250px;
    width: 150px;
    height: 150px;
    background: darkslategray;
    clip: true;
    Text {
        text: "clip: true";
        font-size: 20pt;
        color: white;
    }
    Rectangle {
        x: -40px; y: -40px;
        width: 100px;
        height: 100px;
        background: lightslategray;
    }
}

```
</CodeSnippetMD>

<CodeSnippetMD noScreenShot imagePath="/src/assets/generated/rectangle-clip.png"  imageWidth="200" imageHeight="400"  imageAlt='rectangle clip'>
```slint
// clip: false; the default
Rectangle {
    x: 50px; y: 50px;
    width: 150px;
    height: 150px;
    background: darkslategray;
    Rectangle {
        x: -40px; y: -40px;
        width: 100px;
        height: 100px;
        background: lightslategray;
    }
}

// clip: true; Clips the children of this Rectangle
Rectangle {
    x: 50px; y: 250px;
    width: 150px;
    height: 150px;
    background: darkslategray;
    clip: true;
    Rectangle {
        x: -40px; y: -40px;
        width: 100px;
        height: 100px;
        background: lightslategray;
    }
}

```
</CodeSnippetMD>
By default, when child elements are outside the bounds of a parent, 
they are still shown. When this property is set to `true`, the children 
of this `Rectangle` are clipped and only the contents inside the elements bounds are shown.
</SlintProperty>


## Border Radius properties

### border-radius
<SlintProperty propName="border-radius" typeName="length" defaultValue="0">
The size of the radius. This single value is applied to all four corners.
</SlintProperty>

To target specific corners with different values use the following properties:

### border-top-left-radius
<SlintProperty propName="border-top-left-radius" typeName="length"/>

### border-top-right-radius
<SlintProperty propName="border-top-right-radius" typeName="length"/>

### border-bottom-left-radius
<SlintProperty propName="border-bottom-left-radius" typeName="length"/>

### border-bottom-right-radius


## Drop Shadows

To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of
an element, it's possible to set the following `drop-shadow` properties:

### drop-shadow-blur
<SlintProperty propName="drop-shadow-blur" typeName="length"/>
The radius of the shadow that also describes the level of blur applied to the shadow. Negative values are ignored and zero means no blur.

### drop-shadow-color
<SlintProperty propName="drop-shadow-color" typeName="color"/>
The base color of the shadow to use. Typically that color is the starting color of a gradient that fades into transparency.

### drop-shadow-offset-x
<SlintProperty propName="drop-shadow-offset-x" typeName="length"/>
The horizontal distance of the shadow from the element's frame.


### drop-shadow-offset-y
<SlintProperty propName="drop-shadow-offset-y" typeName="length"/>
The vertical distance of the shadow from the element's frame.
