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

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -