antalya web tasarım

Css ile divlerin köşelerini yuvarlama

Bu derste CSS3 ile gelen yeniliklerden biri olan köşe yuvarlatmayı anlatacağım arkadaşlar. Bunun için bir div oluşturuyoruz.

<div id="radus">###</div>

Css kodumuz da şu şekilde;

#radus {
	background-color: #000;
	height: 100px;
	width: 100px;
}

Şu anda elimizde 100×100’lük siyah bir kare oluştu.

Köşeleri yuvarlaklaştırmak için css’e şu kodları ekliyoruz.

border: 1px solid #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

Dikkat ettiyseniz yeni kodların yazımında tek tük değişiklikler var. Bu şekilde CSS’i düzenlediğimizde elimizde aşağıdaki gibi bir div oluşuyor.

Gelen aramalar :

• div kenar yuvarlama
• css köşe yuvarlama
• div köşeleri yuvarlama
• css div köşe yuvarlama
• divlerin köşelerini yuvarlama