html - border-image-width in css -
this how mdn explains border-image-width.
the border-image-width css property defines width of border image defining inward offsets border edges. if border-image-width greater border-width, border image extends beyond padding (and/or content) edge.
what not tell happen if border-image-width less border-width ?
i did example on it. ran on chrome 56. here code :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>border image</title> <style> p.checkborderimagewidth{ border: 40px solid black; width:500px; border-image-source: url("1.png"); /* note border-image-slice defaults 100% */ border-image-width: 10px; outline: 1px solid black; } </style> </head> <body> <p class="checkborderimagewidth">hi demo</p> </body> </html> border image used :
result is:
so, see solid black border hidden though 40px , boder-image-width 10px. can explain ?
the border image used instead of 'normal' border:
source: https://www.w3schools.com/cssref/css3_pr_border-image.asp
the
border-imageproperty allows specify image used instead of normal border around element.
your citation explains border image cover padding , content of container if border-image-width > border-width.
for example:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>border image</title> <style> p.checkborderimagewidth{ border: 40px solid black; width:500px; border-image-source: url("1.png"); /* note border-image-slice defaults 100% */ border-image-width: 10px; outline: 1px solid black; } p.checkborderimagewidth2{ border: 100px solid black; width:500px; border-image-source: url("1.png"); /* note border-image-slice defaults 100% */ border-image-width: 30px; padding: 5px; outline: 1px solid black; } </style> </head> <body> <p class="checkborderimagewidth">hi demo</p> <p class="checkborderimagewidth2">the border covers text.</p> </body> </html> here border covers text: 
Comments
Post a Comment