Resimlerin Kenarına "Resimlerden" Kenarlık Ekleme

Merhaba arkadaşlar. Elimde aşağıdaki resimler mevcut. Bu resimleri kullanarak bir class oluşturmak istiyorum.

Bu class'ı "<img" koduna eklediğimde, resmin etrafında bu resimlerden kenarlık olsun istiyorum.

Köşeler için: 

(Sol üst köşe için resmin sol üst çeyreği, sağ üst için sağ üst çeyreği, sol alt için sol alt çeyreği ve sağ alt için de sağ alt çeyreği kullanılacak.)

Üst ve alt için: 

(Üst için bu resmin üst yarısı, alt için alt yarısı kullanılacak)

Sağ ve sol kenarlar için: 

(Yine benzer şekilde sol kenar için sol yarısı, sağ kenar için sağ yarısı kullanılacak)

Bunların CSS kodlarını bana çıkarabilir misiniz? Canlı demo burada var (Alliance Shipyard yazan resme tıklarsanız görebilirsiniz) ancak hangi kodları alacağımı, nasıl kullanacağımı bilmiyorum.

Selamlar Hellscream,


Sana lazim olan kod budur umarim, (calis, degistir, ogren bak neler nasil oluyor orda)

 /* container */
#lightbox-anchor { position:absolute; top:10%; left:0; z-index: 9005; width:100%; }
#lightbox-container { width:890px; height:641px; position:relative; display:none; margin:0 auto; background-color:#000; }
#lightbox-container .ui-element { background:url(http://eu.battle.net/wow/static/imag...ightbox/ui.png) no-repeat; }
.ie6 #lightbox-container .ui-element { background-image:url(http://eu.battle.net/wow/static/imag...htbox/ui.gif); }


/* content holder */
#lightbox-content { background-repeat:no-repeat; width:100%; height:100%; background-color:#0d0804; z-index:9005; position:absolute; }
#lightbox-content.loading { background:#0d0804 url(http://eu.battle.net/wow/static/imag...-page-load.gif) no-repeat 50% 50%; }

/* close */
#lightbox-container .lightbox-close { display:block; position:absolute; float:right; right:-14px; top:-18px; width:63px; height:51px; background-position: 0 -156px; z-index:9006; }
#lightbox-container .lightbox-close:hover { background-position:0 -207px; }

/* borders*/
#lightbox-container .border { position:absolute; float:left; z-index:9006; }
.ie6 #lightbox-container .border { line-height:1px; overflow:hidden; }
#lightbox-container #lb-border-top { height:11px; top:-11px; left:0; width:880px; background-image:url(http://eu.battle.net/wow/static/imag...frame-tb.gif); padding-right:10px; }
#lightbox-container #lb-border-right { width:11px; top:0; right:-11px; background:url(http://eu.battle.net/wow/static/imag...a-frame-lr.gif) -11px 0; height:632px; padding-bottom:9px; }
#lightbox-container #lb-border-bottom { height:11px; bottom:-11px; left:0; background:url(http://eu.battle.net/wow/static/imag...a-frame-tb.gif) 0 -11px; width:878px; padding-right:12px; }
.ie6 #lightbox-container #lb-border-bottom { bottom:-7px; }
#lightbox-container #lb-border-left { width:11px; top:0; left:-11px; background-image: url(http://eu.battle.net/wow/static/imag...frame-lr.gif); height:632px; padding-bottom:9px; }
/* corners */
#lightbox-container .corner { position:absolute; background:url(http://eu.battle.net/wow/static/imag...me-corners.gif) no-repeat; width:11px; height:11px; float:left; z-index:9006; }
#lightbox-container .corner-top-left { top:-11px; left:-11px; }
#lightbox-container .corner-bottom-left { background-position:0 -11px; bottom:-11px; left:-11px; }
#lightbox-container .corner-top-right { background-position:-11px 0; top:-11px; right:-11px; }
#lightbox-container .corner-bottom-right { background-position:-11px -11px; bottom:-11px; right:-11px; }

/* paging */
#lightbox-container .control-wrapper { height:39px; position:absolute; float:left; width:100%; bottom:-48px; z-index:9006; }
.ie6 #lightbox-container .control-wrapper { bottom:-45px; }
#lightbox-container .control-wrapper .lightbox-controls { width:184px; height:39px;  margin:0 auto; background:none; }
#lightbox-container .control-wrapper a { display:block; height:39px; float:left; }

/* paging - previous */
#lightbox-container .control-wrapper a.previous { width:63px; background-position:0 0; }
#lightbox-container .control-wrapper a.previous:hover { background-position:0 -39px; }

/* paging - gallery view */
#lightbox-container .control-wrapper a.gallery-view { position:relative; top:-39px; margin-bottom:-39px; left:63px; width:58px; background-position:-63px 0; }
#lightbox-container .control-wrapper a.gallery-view:hover { background-position:-63px -39px; }

/* paging - next */
#lightbox-container .control-wrapper a.next { margin-left:58px; width:63px; background-position:-121px 0; }
#lightbox-container .control-wrapper a.next:hover { background-position:-121px -39px; }

/* no paging */
#lightbox-container .control-wrapper.no-paging .lightbox-controls { background:none; }
#lightbox-container .control-wrapper.no-paging a.previous,
#lightbox-container .control-wrapper.no-paging a.next { display:none; }
#lightbox-container .control-wrapper.no-paging a.gallery-view { top:0; left:41px; width:102px; height:39px; background-position:0 -78px; }
#lightbox-container .control-wrapper.no-paging a.gallery-view:hover { background-position:0 -117px; }

/* no gallery */
#lightbox-container .control-wrapper.no-gallery a.gallery-view { display:none; }
#lightbox-container .control-wrapper.no-gallery .lightbox-controls { background:none; }
#lightbox-container .control-wrapper.no-gallery a.previous { margin-left:29px; }
#lightbox-container .control-wrapper.no-gallery a.next { margin-left:0; }

/* no controls */
#lightbox-container .control-wrapper.no-gallery.no-paging { display:none; }

/* error loading content */
#lightbox-container .lightbox-error { text-align:center; font-size:16px; background: #000 url(http://eu.battle.net/wow/static/imag...ge/warning.png) no-repeat 50% 20px; vertical-align:text-bottom; line-height:550px; }
.ie6 #lightbox-container .lightbox-error { background: #000; vertical-align:middle; line-height:normal; }

/* ie6 fix */
.ie6 #lightbox-container .no-gallery,
.ie6 #lightbox-container .no-paging { display:block; }
.ie6 #lightbox-container .no-controls { display:none; }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>

    </style>
</head>

<body>

<div xmlns="http://www.w3.org/1999/xhtml" id="lightbox-anchor"><div id="lightbox-container" style="top: 500px; width: 950px; height: 594px; display: block;"><h1 id="lightbox-title"></h1><div id="lightbox-content" class="" style="height: 594px;"><img src="https://bnetcmsus-a.akamaihd.net/cms/content_folder_media/HXKN9HKBBCBI1433278387979.jpg" /></div><div class="corner corner-top-left"></div><div class="corner corner-top-right"></div><div class="corner corner-bottom-left"></div><div class="corner corner-bottom-right"></div><div class="border" id="lb-border-top" style="width: 940px;"></div><div class="border" id="lb-border-right" style="height: 585px;"></div><div class="border" id="lb-border-bottom" style="width: 938px;"></div><div class="border" id="lb-border-left" style="height: 585px;"></div><div class="control-wrapper no-paging no-gallery"><div class="lightbox-controls ui-element"><a class="ui-element previous" href="javascript:;"></a><a class="ui-element next" href="javascript:;"></a><a class="ui-element gallery-view" href="javascript:;"></a></div></div><a class="ui-element lightbox-close" href="javascript:;"></a></div></div>
    
</body>

</html>