Resimler Yuvarlak ve Yanyana Nasıl Yaparım?

Merhaba arkadaşlar, aşağıdaki gibi resimleri yanyana ve yuvarlak olmasını istiyorum.

Ama yuvarlak yapsam da yanyana getiremiyorum. Çok fazla bilgim yok.
Yardımcı olur musunuz?

Photoshop biliyorsanız bunu yapması çok kolaydır. Yuvarlak kestiğiniz resmi Ctrl + T ile düzeltebilir taşıyabilirsiniz.

Pek vaktim yok yazmaya ama mantık şu resmin kare olmak zorunda örnek 100x100px

<img> etiketinin içerisine class="hizmetresim" diye bir parametre ekleyin.

Yuvarlak yapmak için css kodunu şu şekilde yazacaksınız;

.hizmetresim{
border-radius: 100px;
}

Eğer border yani kenar rengi verecekseniz şu şekilde olacak;

.hizmetresim{
border-radius: 100px;
border: 3px #1EE2C4 solid;
}


Yan Yana yazdırma işinide; bu hizmetleri birer div içerisine alacaksın ve divlere css ile flolat: left vereceksin bu şekildede yan yana olur.

Az önce göstermek için hazırladım. Kendine göre düzenleyip kullanabilirsin.

<ul class="ulMenu">
    <li><a href="#" title="Baslik">
        <img src="http://i.imgur.com/UqspZf5.jpg" alt="Asfalt" />
        <span>ASFALT SERİM</span>
    </a></li>
    <li><a href="#" title="Baslik">
        <img src="http://i.imgur.com/UqspZf5.jpg" alt="Asfalt" />
        <span>RENKLİ VE DESENLİ ASFALT</span>
    </a></li>
    <li><a href="#" title="Baslik">
        <img src="http://i.imgur.com/UqspZf5.jpg" alt="Asfalt" />
        <span>DESEN VE RENKLER</span>
    </a></li>
    <li><a href="#" title="Baslik">
        <img src="http://i.imgur.com/UqspZf5.jpg" alt="Asfalt" />
        <span>KİRALIK İŞ MAKİNALARI</span>
    </a></li>
</ul>

    .ulMenu {background: linear-gradient(135deg, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); float:left;}
        .ulMenu li { float: left; width: 25%; list-style:none;}
            .ulMenu li a {display:table; padding:4px; margin:5px 10px; text-decoration: none; }
                .ulMenu li a img {border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; float:left; margin-right:10px; }
                .ulMenu li a span {color:#2b2b2b; font-weight:bold; display:table-cell; vertical-align:middle; }