CSS rounded corners (with pure css)

03,03,2010 at 3:15 2 yorum

<![CDATA[I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.

If you want to use all corners with same radius this is the easy way:

.my_rounded_corners {
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

but if you want to control every corner this is good:

.my_rounded_corners {
  border: 1px solid #ccc;

  -moz-border-radius-topleft: 10px;
  -khtml-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;

  -moz-border-radius-topright: 0px;
  -khtml-border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;

  -moz-border-radius-bottomleft: 4px;
  -khtml-border-bottom-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;

  -moz-border-radius-bottomright: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Source : Sinan Ya?ar’s w3schools]]>

Reklamlar

Entry filed under: Cool Stuff, Css3. Tags: .

6 Reasons Why Designers Should Code Resize & Crop Image with GD2 Lib.

2 Yorum Add your own

  • 1. Anonim  |  06,03,2010, 1:45

    Cevapla
  • 2. Aaron Godin  |  06,03,2010, 1:45

    Border radius is great but you’ve got a lot of code there. You can define each of them in a single line. Harry Roberts at CSSWizardry posted recently in regards to this: http://bit.ly/bSuFk4

    Cevapla
  • 3. Anonim  |  06,03,2010, 1:45

    Cevapla

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Takvim

Mart 2010
P S Ç P C C P
« Şub   Nis »
1234567
891011121314
15161718192021
22232425262728
293031  

Most Recent Posts


%d blogcu bunu beğendi: