CSS-ympyrä

Tässä on pieni hyödyllinen CSS-koodinpätkä, jolla saa tehtyä ympyröitä. Koodista on hyötyä esimerkiksi, jos kuvan haluaa ympyrän sisään.

CSS

<style type="text/css">
.circle {
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
	background-color: #00F;
	display: table;
	height: 100px;
	width: 100px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
}
</style>

HTML

<div class="circle">
  <p>CSS</p>
  <p>Circle</p>
</div>

Esimerkki

Border-radiuksen minimi vaatimukset

  • Firefor 4.0
  • Chrome 4.0
  • Safari 3.1
  • Internet Explorer 9
  • Opera 10.5

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

*