مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
 border: 10px solid transparent;
 padding: 15px;
 -webkit-border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 50 round; /* Safari 3.1-5 */
 -o-border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 50 round; /* Opera 11-12.1 */
 border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 50 round;
}

#borderimg2 {
 border: 10px solid transparent;
 padding: 15px;
 -webkit-border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 20% round; /* Safari 3.1-5 */
 -o-border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 20% round; /* Opera 11-12.1 */
 border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 20% round;
}

#borderimg3 {
 border: 10px solid transparent;
 padding: 15px;
 -webkit-border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 30% round; /* Safari 3.1-5 */
 -o-border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 30% round; /* Opera 11-12.1 */
 border-image: url(http://cp.webmehraz.com//Files/Tutorial/10224/border.png) 30% round;
}
</style>
</head>
<body>

border-image: url(border.png) 50 round;
border-image: url(border.png) 20% round;
border-image: url(border.png) 30% round;

نکته :Internet Explorer 10 و ورژن های قبل از آن از این صفت پیشتبانی نمی کنند.


</body>
</html>

مقادیر متفاوت برش تصویر حاشیه