Loading Please Wait...
CSS border-image property sets image in place of the regular border around the element.
border-image: source slice / width / outset repeat;
source: source or URL of the image. We can also use gradients.
slice: dimension of the slicing of the image into regions. May have one, two, three, or four values. (Number, percentage, fill)
width: width of the image. May have one, two, three, or four values. We can also define multiple values. enclosed by slashes (/). (length, percentage)
outset: distance between image and element outer edge. May have one, two, three, or four values. (length, number)
repeat: define repetition of the image. May have one, two, three, or four values. (stretch, repeat, round, space)
Global values: inherit, initial, revert, revert-layer, unset.
/* source */
border-image: linear-gradient(red, blue);
/* source | slice (27) */
border-image: url("border.png") 27;
/* source | slice (27) | repeat (space) */
border-image: url("border.png") 27 space;
/* source | slice (27) | width (/ 35px) */
border-image: url("border.png") 27 / 35px;
/* source | slice (27 23) | width (/ 50px 30px /) | outset (1rem) | repeat (round space) */
border-image: url("border.png") 27 23 / 50px 30px / 1rem round space;
/* Global values */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;
border-image-source property sets the source image of the border.
Values: none, url('border.png'), any gradient values, global values
/* keyword value */
border-image-source: none;
/* image value */
border-image-source: url(image.jpg);
/* gradient value */
border-image-source: linear-gradient(to top, red, yellow);
/* global value */
border-image-source: inherit;
border-image-slice property sets dimension of the slicing of the image into regions.
Values: fill, percentage (10%, 5%), number (1, 28, 87), global values
/* All sides */
border-image-slice: 30%;
/* top and bottom | left and right */
border-image-slice: 10% 30%;
/* top | left and right | bottom */
border-image-slice: 30 30% 45;
/* top | right | bottom | left */
border-image-slice: 7 12 14 5;
/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;
/* Global values */
border-image-slice: inherit;
border-image-width property sets width of the image.
Values: auto, percentage (10%, 5%), number (1, 28, 87), length (10px, 1em), global values
/* Keyword value */
border-image-width: auto;
/* length value */
border-image-width: 1rem;
/* percentage value */
border-image-width: 25%;
/* number value */
border-image-width: 3;
/* top and bottom | left and right */
border-image-width: 2em 3em;
/* top | left and right | bottom */
border-image-width: 5% 15% 10%;
/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;
/* Global values */
border-image-width: inherit;
border-image-outset property sets distance between image and element outer edge.
Values: number (1, 28, 87, 2.45), length (10px, 1em), global values
/* length value */
border-image-outset: 1rem;
/* number value */
border-image-outset: 1.5;
/* top and bottom | left and right */
border-image-outset: 1 1.2;
/* top | left and right | bottom */
border-image-outset: 30px 2 45px;
/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;
/* Global values */
border-image-outset: inherit;
border-image-repeat property defines repetition of the image
Values: stretch, repeat, round, space
/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* top and bottom | left and right */
border-image-repeat: round stretch;
/* Global values */
border-image-repeat: inherit;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved