RectangleShape QML Type | Qt Quick | Qt 6.11.1
Description: A filled rectangle with an optional border.

- Qt 6.11
- Qt Quick
- QML Types
- QtQuick.Shapes.DesignHelpers
- RectangleShape
- Qt 6.11.1 Reference Documentation

# RectangleShape QML Type

A filled rectangle with an optional border. More...

Import Statement: | `import QtQuick.Shapes.DesignHelpers 6.11`
Since: | QtQuick 6.10

- List of all members, including inherited members

## Properties

- bevel : bool
- borderMode : enumeration
- bottomLeftBevel : bool
- bottomLeftRadius : real
- bottomRightBevel : bool
- bottomRightRadius : real
- capStyle : enumeration
- dashOffset : real
- dashPattern : list<real>
- fillColor : color
- fillGradient : ShapeGradient
- fillRule : enumeration
- joinStyle : enumeration
- radius : real
- strokeColor : color
- strokeStyle : enumeration
- strokeWidth : real
- topLeftBevel : bool
- topLeftRadius : real
- topRightBevel : bool
- topRightRadius : real

## Detailed Description

RectangleShape is used to fill areas with solid color or gradients and to provide a rectangular border.

Each Rectangle item is painted using either a solid fill color, specified using the fillColor property, or a gradient, defined using one of the ShapeGradient subtypes and set using the gradient property. If both a color and a gradient are specified, the gradient is used.

An optional border can be added to a rectangle with its own color and thickness by setting the strokeColor and strokeWidth properties. Setting the color to `transparent` creates a border without a fill color.

Rounded rectangles can be drawn using the radius property. The radius can also be specified separately for each corner. Additionally, bevel can be applied on any corner to cut it off sharply.

RectangleShape's default value for QtQuick.Shapes::Shape::preferredRendererType is `Shape.CurveRenderer`.

## Example Usage

         RectangleShape {
             id: rectangleShape
             anchors.centerIn: parent
             radius: 0
             topLeftRadius: 30
             bottomRightRadius: 30
             bevel: true
             joinStyle: ShapePath.MiterJoin
             fillColor: "#3ad23c"
             strokeColor: "transparent"
             visible: false
         }

## Property Documentation

### bevel : bool

This property defines whether the corners of the rectangle are beveled.

Setting it to `false` results in either sharp or rounded corners, depending on the values of the individual radius properties.

This property may be overridden by the individual bevel properties.

         RectangleShape {
             id: rectangleShape
             anchors.centerIn: parent
             radius: 0
             topLeftRadius: 30
             bottomRightRadius: 30
             bevel: true
             joinStyle: ShapePath.MiterJoin
             fillColor: "#3ad23c"
             strokeColor: "transparent"
             visible: false
         }

See also topLeftBevel, topRightBevel, bottomLeftBevel, and bottomRightBevel.

### borderMode : enumeration

The borderMode property determines where the border is drawn along the edge of the rectangle.

Constant | Description
--- | ---
`RectangleShape.Inside` | The border is drawn along the inside edge of the item and does not affect the item width.

This is the default value.

Constant | Description
--- | ---
`RectangleShape.Middle` | The border is drawn over the edge of the item and does not affect the item width.
`RectangleShape.Outside` | The border is drawn along the outside edge of the item and increases the item width by the value of strokeWidth.

See also strokeWidth.

### bottomLeftBevel : bool

### bottomRightBevel : bool

### topLeftBevel : bool

### topRightBevel : bool

If set, these properties define the individual corner bevels. Setting them to `false` results in either sharp or rounded corners, depending on the values of the individual radius properties. Setting them to `true` results in bevelled corners. When unset, the value of bevel is used instead.

These properties are unset by default. Assign `undefined` to them to return them to the unset state.

In the following example, `bottomRightBevel` is set to true:

         RectangleShape {
             id: rectangleShape
             anchors.centerIn: parent
             topLeftRadius: 0
             bottomRightBevel: true
             joinStyle: ShapePath.MiterJoin
         }

See also bevel.

### bottomLeftRadius : real

### bottomRightRadius : real

### topLeftRadius : real

### topRightRadius : real

If set, these properties define the individual corner radii. A zero value defines that corner to be sharp, while a positive value defines it to be rounded. When unset, the value of radius is used instead.

These properties are unset by default. Assign `undefined` to them to return them to the unset state.

In the following example, radius is set to `10`, and `topLeftRadius` to `0`:

         RectangleShape {
             id: rectangleShape
             anchors.centerIn: parent
             topLeftRadius: 0
             bottomRightBevel: true
             joinStyle: ShapePath.MiterJoin
         }

See also radius.

### capStyle : enumeration

This property defines how the end points of lines are drawn. The default value is `ShapePath.SquareCap`.

Constant | Description
--- | ---
`ShapePath.FlatCap` | A square line end that does not cover the end point of the line.
`ShapePath.SquareCap` | A square line end that covers the end point and extends beyond it by half the line width.
`ShapePath.RoundCap` | A rounded line end.

### dashOffset : real

This property defines the starting point on the dash pattern, measured in units used to specify the dash pattern.

The default value is `0`.

See also QPen::setDashOffset().

### dashPattern : list<real>

This property defines the dash pattern when strokeStyle is set to ShapePath.DashLine. The pattern must be specified as an even number of positive entries where the entries 1, 3, 5... are the dashes and 2, 4, 6... are the spaces. The pattern is specified in units of the pen's width.

The default value is (4, 2), meaning a dash of 4 * strokeWidth pixels followed by a space of 2 * strokeWidth pixels.

See also QPen::setDashPattern().

### fillColor : color

This property holds the fill color.

When set to `transparent`, no filling occurs.

The default value is `"white"`.

Note: If either fillGradient is set to something other than `null`, it will be used instead of `fillColor`.

### fillGradient : ShapeGradient

The fillGradient of the rectangle fill color.

By default, no fillGradient is enabled and the value is null. In this case, the fill uses a solid color based on the value of fillColor.

When set, fillColor is ignored and filling is done using one of the ShapeGradient subtypes.

Note: The Gradient type cannot be used here. Rather, prefer using one of the advanced subtypes, like LinearGradient.

### fillRule : enumeration

This property holds the fill rule. The default value is `ShapePath.OddEvenFill`. For an explanation on fill rules, see QPainterPath::setFillRule().

Constant | Description
--- | ---
`ShapePath.OddEvenFill` | Odd-even fill rule.
`ShapePath.WindingFill` | Non-zero winding fill rule.

### joinStyle : enumeration

This property defines how joins between two connected lines are drawn. The default value is `ShapePath.BevelJoin`.

Constant | Description
--- | ---
`ShapePath.MiterJoin` | The outer edges of the lines are extended to meet at an angle, and this area is filled.
`ShapePath.BevelJoin` | The triangular notch between the two lines is filled.
`ShapePath.RoundJoin` | A circular arc between the two lines is filled.

### radius : real

This property defines the corner radius used to define a rounded rectangle.

If radius is a positive value, the rectangle path will be defined as a rounded rectangle, otherwise it will be defined as a normal rectangle.

This property may be overridden by the individual corner radius properties.

The default value is `10`.

See also topLeftRadius, topRightRadius, bottomLeftRadius, and bottomRightRadius.

### strokeColor : color

This property holds the stroking color.

When set to `transparent`, no stroking occurs.

The default value is `"black"`.

### strokeStyle : enumeration

This property defines the style of stroking. The default value is ShapePath.SolidLine.

Constant | Description
--- | ---
`ShapePath.SolidLine` | A plain line.
`ShapePath.DashLine` | Dashes separated by a few pixels.

### strokeWidth : real

This property holds the stroke width.

When set to a negative value, no stroking occurs.

The default value is `1`.