0

Create Rounded Corners with Border-Radius

Senin, 25 Juli 2011
Share this Article on :



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.


Artikel Terkait:

0 komentar:

Posting Komentar