CSS ile Oval border (radius)

Bana lazim oldu arastirdim.Bir cok kisininde isine yarayacagini dusunerek paylasmak istedim.

Duz Metin
CODE:
  1. -moz-border-radius-topleft
  2. -moz-border-radius-topright
  3. -moz-border-radius-bottomleft
  4. -moz-border-radius-bottomright
  5. -moz-border-radius



isimlerindende anlayacaginiz gibi;
-moz-border-radius-topleft = sol ust
-moz-border-radius-topright = sag ust
-moz-border-radius-bottomleft = sol alt
-moz-border-radius-bottomright = sag alt
-moz-border-radius = butun koseler

Test 1:

Duz Metin
HTML:
  1. <div style="height:50px;width:100px;-moz-border-radius:10px;border:2px solid #000000;"></div>

Sonuc 1:



Test 2:

Duz Metin
HTML:
  1. <div style="height:50px;width:100px;-moz-border-radius:30px 5px;border:2px solid #000000;"></div>

Sonuc 2:



Test 3:

Duz Metin
HTML:
  1. <div style="height:50px;width:100px;-moz-border-radius-topright:10px;-moz-border-radius-bottomright:10px;border:2px solid #000000;"></div>

Sonuc 3:



Test 4:(image)

Duz Metin
HTML:
  1. <img src="http://www.kareweb.net/100x40.jpg" style="border:2px solid #000000;-moz-border-radius:10px;padding:2px;"/>

Sonuc 4:(image)


Kendinize gore bir cok cesit gorunum elde edebilirsiniz..

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (5 oy ortalamasi: 4.2 / 5)
Loading ... Loading ...


Etiketler: , , , , , , , , ,

  • Tarih Perşembe, 04 Eyl 2008 saat 23:40

  • Kategori:
    • Css, Web 2.0
  • Yazıyı buradan RSS 2.0 takip edebilirsiniz .

  • Yorum'u da buradan yazabilirsiniz
Yorum Ekle

3 yorum

  1. CASH yazmış: 21.09.2008 saat 02:41

    güzel bir yazı fakat bu özellik yalnızca mozilla-firefox ile çalışır. internet explorerda borderlar düz gözükür. iyi kodlamalar

  2. ysbostan yazmış: 22.09.2008 saat 12:05

    Belirtmeyi unutmuşum teşekkürler ;)

  3. seryak yazmış: 18.10.2008 saat 04:12

    Chrome tarayıcısıda aynı şekilde :roll:

Benzer Yazılar:

  • Photoshop ile Web 2.0 Buton Yapımı (1 Yorum)

    • Bunu okuyanlar bunlarıda okudu;

    Yorum Yaz