CSS3 تجعل من الممكن عمل حدود أو اطار علي الصور برمجيا وتعطي تأثير الحدود المطلوبه وتعمل علي كل المتصفحات

هذه الوظيفة ليست وصفا مفصلا حول الحدود ولكنها توضح كيفية استخدام هذه الخاصيه لإضافة إطارات للصور وخلق صوره للإطار الذي ترغب بإستخدامه

والأن في هذه المسأله ينبغي علينا أن نقوم بتحديد الإطار المراد تعيينه:

CSS:

[html] imageborder{
border-width: 20px;
-moz-border-image: url(frame.gif) 20 stretch; /*Mozilla version*/
-webkit-border-image: url(frame.gif) 20 stretch; /*Webkit version*/
-o-border-image: url(frame.gif) 20 stretch; /*Opera version*/
-ms-border-image: url(frame.gif) 20 stretch; /*IE syntax when it does support this prop*/
border-image: url(frame.gif) 20 stretch; /*Standard version*/
}
[/html]

Markup:

[html] <div style="width:50%;min-height:150px">
Content text here…
</div>
[/html]

وهذا هو ناتج التطبيق

المثال الثاني:

CSS:

[html] .imageborder2{
border-width: 25px 30px;
-moz-border-image: url(frame2.png) 25 30 stretch;
-webkit-border-image: url(frame2.png) 25 30 stretch;
-o-border-image: url(frame2.png) 25 30 stretch;
-ms-border-image: url(frame2.png) 25 30 stretch;
border-image: url(frame2.png) 25 30 stretch;
}.
[/html]

Markup:

[html] <div style="width:470px;height:300px;background:url(ocean_thumb.jpg) center center no-repeat">
</div>
[/html]