Qt Reference Documentation

QML BorderImage Element

The BorderImage element provides an image that can be used as a border. More...

Inherits Item

  • List of all members, including inherited members
  • Properties

    Detailed Description

    A BorderImage breaks an image into 9 sections, as shown below:

    When the image is scaled:


     BorderImage {
         width: 180; height: 180
         border { left: 30; top: 30; right: 30; bottom: 30 }
         horizontalTileMode: BorderImage.Stretch
         verticalTileMode: BorderImage.Stretch
         source: "content/colors.png"
     BorderImage {
         width: 180; height: 180
         border { left: 30; top: 30; right: 30; bottom: 30 }
         horizontalTileMode: BorderImage.Round
         verticalTileMode: BorderImage.Round
         source: "content/colors.png"

    The BorderImage example shows how a BorderImage can be used to simulate a shadow effect on a rectangular item.

    Property Documentation

    border.left : int

    border.right : int

    border.top : int

    border.bottom : int

    The 4 border lines (2 horizontal and 2 vertical) break the image into 9 sections, as shown below:

    Each border line (left, right, top, and bottom) specifies an offset in pixels from the respective side.

    For example:

     border.bottom: 10

    sets the bottom line 10 pixels up from the bottom of the image.

    The border lines can also be specified using a .sci file.

    horizontalTileMode : enumeration

    verticalTileMode : enumeration

    This property describes how to repeat or stretch the middle parts of the border image.

    • BorderImage.Stretch - Scale the image to fit to the available area.
    • BorderImage.Repeat - Tile the image until there is no more space. May crop the last image.
    • BorderImage.Round - Like Repeat, but scales the images down to ensure that the last image is not cropped.

    read-onlyprogress : real

    This property holds the progress of image loading, from 0.0 (nothing loaded) to 1.0 (finished).

    See also status.

    smooth : bool

    Set this property if you want the image to be smoothly filtered when scaled or transformed. Smooth filtering gives better visual quality, but is slower. If the image is displayed at its natural size, this property has no visual or performance effect.

    Note: Generally scaling artifacts are only visible if the image is stationary on the screen. A common pattern when animating an image is to disable smooth filtering at the beginning of the animation and reenable it at the conclusion.

    source : url

    BorderImage can handle any image format supported by Qt, loaded from any URL scheme supported by Qt.

    It can also handle .sci files, which are a QML-specific format. A .sci file uses a simple text-based format that specifies the borders, the image file and the tile rules.

    The following .sci file sets the borders to 10 on each side for the image picture.png:

     border.left: 10
     border.top: 10
     border.bottom: 10
     border.right: 10
     source: picture.png

    The URL may be absolute, or relative to the URL of the component.

    See also QDeclarativeImageProvider.

    read-onlystatus : enumeration

    This property holds the status of image loading. It can be one of:

    See also progress.


    Thank you for giving your feedback.

    Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.