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.

Artikel Terkait: