Border Image

The border-image property replaces a solid border with a gradient or image, enabling complex decorative borders that solid colour cannot achieve.

Gradient Borders

border-image: linear-gradient(...) 1 uses a gradient as the border. The trailing 1 is the required slice value.

Shorthand Properties

border-image-source — the image or gradient
border-image-slice — how to slice the image for corners and edges
border-image-width — how thick the border image is
border-image-outset — how far the image extends beyond the border box
border-image-repeat — how edge regions fill space: stretch, repeat, round

Example

/* Gradient border — most common use case */
.gradient-border {
    border: 4px solid transparent;
    border-image: linear-gradient(
        135deg, #1a73e8, #e53935
    ) 1;
    border-radius: 0; /* border-image disables radius */
    padding: 1rem;
}

/* Workaround for radius + gradient border */
.gradient-border-rounded {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
}
.gradient-border-rounded::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a73e8, #e53935);
    z-index: -1;
}

/* Image slice border */
.ornate {
    border-image: url("/img/border-ornament.png") 30 round;
    border-width: 30px;
}

CSS

Full Editor

Pro Tip

border-image and border-radius cannot be used together — the image always overrides rounding. Use the ::before pseudo-element trick with a negative inset and z-index: -1 to achieve gradient borders with rounded corners.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned