сделать изображение в круг

Question

У меня есть изображения в слайд-шоу на this page. Я хотел бы, чтобы квадратные изображения стали циркулировать, используя css. Мне сложно с помощью элемента проверки b/c изображения находятся в слайд-шоу. Какой класс можно использовать для добавления граничного радиуса, чтобы сделать квадратное изображение, например, салата/картофеля макарон в форме круга?

<div id="rev_slider_22_3_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:400px;"> 
    <div id="rev_slider_22_3" class="rev_slider fullwidthabanner" style="display:none;max-height:400px;height:400px;"> 
<ul> <!-- SLIDE --> 
    <li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" > 
     <!-- MAIN IMAGE --> 
     <img src="http://xxx.image.jpg" alt="challah-1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"> 
     <!-- LAYERS --> 
    </li> 
    <!-- SLIDE --> 
    <li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" > 
     <!-- MAIN IMAGE --> 
     <img src="http://xxx/meatballs.jpg" alt="matza-balls" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"> 
     <!-- LAYERS --> 
    </li> 
    <!-- SLIDE --> 

Answer 1

Используйте это:

.tp-simpleresponsive >ul li { 
    border-radius: 50%; 
} 
.rev_slider_wrapper { 
    background-color: transparent !important; 
} 

Answer 2

Вы можете применить радиус границы 50% к квадратному изображению, чтобы сделать его круглым.

.circular-image { 
    border-radius: 50%; 
} 

Answer 3

В то время как лучший способ для достижения этой цели является использование:

.circular-image { 
    border-radius: 50%; 
} 

Вы должны знать, что в большинстве случаев, вам нужно применить min-width и min-height, иначе ваш результат может быть не таким, как ожидалось, в некоторых брокерах/использованиях.