CSS3 Border Image

Next ❯Box Shadow

Used to set an image as the border of an element

  • It's a part of border property
  • turned_in_notBorder Image Properties
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repeat
    • border-image
    border ImageBorder Image Used Below
    Border Image Used Below

  • The border should be in at least 3X Metric (like 3x1, 3x2)
  • Middle sections of images are only repeated or stretched
  • 1st & last sections of images are used as corners of border

Checkout Border Image
h5 {
  border:10px solid transparent;
  border-image-source: url('image.png');
  border-image-slice:40;
  border-image-width:1.5;
  border-image-outset:2px;
  border-image-repeat:repeat;
}
border-imagesubject
  • label_outlineTryout Others
    PropertiesValues
    border-image-source:
    border-image-slice:
    border-image-width:
    border-image-outset:
    border-image-repeat:
    • border property need to be declared first

/*border-image-width full syntax*/
  border-image-width: top right bottom left;

/*border-image-outset full syntax*/
  border-image-outset: top right bottom left;

/*border-image-repeat full syntax*/
  border-image-repeat: top&bottom left&right;

/*border-image-slice full syntax, 'fill' is optional*/
  border-image-slice:(fill) top right bottom left;

Checkout the Border
h5 {
  border:10px solid transparent;
/*border-image:source slice/width/outset repeat */            
  border-image:url('image.png') 50/1/0 stretch;
}
border-image (All-In-One)subject

  • Box Shadow
❮ Prev Border Radius
Next ❯Box Shadow
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯