Detailed example code for border-image in CSS styles

Border-image-source property sets the path of the picture for the border [none | <image>]

p {   border:20px solid #000;   Border-image-source:url (border.png);}

Border-image-slice Property picture Border Inward offset [<number> | <percentage>] (1,4)? fill

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;}

Border-image-width property sets the width of the picture border [<length>|<number> |<percentage> | auto] (1,4)

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;   BORDER-IMAGE-WIDTH:27PX 1 10% 27px;}

Border-image-outset property sets the amount of border image area beyond the border [<length>|<number>] (1,4)

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;   BORDER-IMAGE-WIDTH:27PX 1 10% 27px;   border-image-outset:27px 27px 27px 27px;}

Border-image-repeat property sets whether the image border should be tiled (repeated), covered (rounded), or stretched (stretched)

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;   BORDER-IMAGE-WIDTH:27PX 1 10% 27px;   border-image-outset:27px 27px 27px 27px;   border-image-repeat:rounded;   Border-image:url (border.png)  rounded;}