Senin, 25 Juli 2011

Create Rounded Corners with Border-Radius




Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung

Postingan tutorial blog ini mengenai Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung dengan css.
Disini saya hanya menjelaskan prinsip dari Border Radius atau Membuat Garis Lengkung dengan css di beberapa browser.
Perlu kamu ketahui bahwa kode html pada setiap browser untuk Border Radius atau Membuat Garis Lengkung dengan css itu berbeda.
Berikut penjelasan Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung pada beberapa browser.

- Border Radius atau Membuat Garis Lengkung pada Mozilla Firefox

-moz-border-radius


Contohnya :
-moz-border-radius-topright:15px;


- Border Radius atau Membuat Garis Lengkung pada Webkit (Safari) atau yang biasa disebut Google Chrome

-webkit-border-radius


Contohnya :
-webkit-border-top-left:15px;


- Border Radius atau Membuat Garis Lengkung pada Opera

border-radius


Contohnya :
border-radius:15px;


Berikut beberapa model Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung pada Mozilla Firefox, Webkit (safari)dan Opera:

-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-left-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; border:5px solid #BDDC12; padding:10px;

Jika ingin melihat border radius circle atau membuat lingkaran dengan border radius klik DISINI

Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung dengan css ini bisa di gunakan untuk posting, widget,dll.

1 komentar:

  1. tapi aku mau tetap pada blogspot karena khawatir akan di baned google seperti domain gratis co.cc.
    lagi pula aq sudah ada blog utama dengan domain berbayar.
    http://www.ulil-amri.com

    BalasHapus

Terima Kasih Telah Meringankan Tangan Sobat