css - can we set different border-image for every side of div? -
i trying make div picture frame design using border-image property.
frame.jpg
left side frame image. can 1 suggest me how can apply right side?
i not interested using javascript handle it..
css3 solution please...
while might think browser assume "take image , tile way around" you'd wrong. border-image way more versatile , provides kinds of ways slice , dice same image different results. assumptions css3 border-image property makes image provide not intuitive! start reading article excellent explanation of each individual property of border-image: css-tricks: border-image.
.mydiv { padding: 20px 38px; border-image-source: url(http://i.stack.imgur.com/lr2x0.jpg); border-image-width: auto; border-image-repeat: repeat; }
<div class="mydiv"> <h1> headline: breaking news! </h1> </div>
until have feel property, i'd suggest setting each part individually (instead of using omnibus shorthand property - setting border-width, border style, , border-color instead of using border). can experiment this border-image generator great way develop feel of how browser slice , dice image.
Comments
Post a Comment