Lekkie zaokrąglenie/usunięcie rogów prostokąta w kole

Question

Siemka.

Borykam się z małym problemem. Mianowicie mam obecnie taki efekt.

Kod HTML

<div class="col-lg-4 works">
	<div class="work">
		<img src="http://placehold.it/350x350/FF0000/FFF" alt="image" />
		<p class="img-title">Counstuction works</p>
	</div>
	<p>Woodwork, sanded or clean everything inside of building is no problem for us.</p>
	<a href="#">Read More</a>
	<div style="clear:both;"></div>
</div>

Kod CSS

.works {
	padding: 20px 0;
}

.works p {
	font-size: 18px;
	color: #0e1015;
	padding-top:20px;
	max-width: 350px;
	margin: 0 auto;
}

.work {
	position: relative; 
	max-width: 215px;	
	border-radius: 50%;
	margin: 0 auto;
}

.work img { 
   position: relative; 
   width: 100%; /* for IE 6 */
   border-radius: 50%;
}

.work p.img-title {
	position: absolute; 
	top: 50%; 
	left: 0; 
	width: 100%; 
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	margin: -24px 0;
	padding: 14px;
}

.works a:link, .works a:hover {
	font-style: italic;
	font-size: 18px;
	font-weight: 300;
	color: #6d7075;
}

 

Jak tło napisu wyrównać do koła? Ma ktoś pomysł? Może lepiej zmienić ciemno tło na obrazek?

Answer 1

Możesz próbować z czymś takim:

#example {
  border-radius: 30px/10px; /* horizontal radius / vertical radius */
}

albo dodać do klasy work

overflow: hidden;

co ukryje ci wszystko co wystaje poza div z tą klasą

Comments

Myślałem że 

overflow: hidden;

działa tylko na tekst (rzadko go używam), ale pomogło. Dzięki!

---

Działa na całe elementy zawarte w elemencie posiadającym tę właściwość. Warto tego używać w momencie gdy chcesz np. wsunąć coś do kontenera bez dziwnego efektu przesuwania elementu nad innymi elementami strony.

---

Jeden problem jest tylko, przy scrollowaniu chwilowo zanika (nie wiem czemu), ale zniwelowałem to pierwszym sposobem, który podałeś :)

Answer 2

border-radius: 15px;

Coś takiego próbowałeś?

Comments

Tak, ale problem w tym, że wtedy zaokrągla się również część w kole.