Mengenal Berbagai Border Radius - Hallo sahabat Anak Google, Pada Artikel yang anda baca kali ini dengan judul Mengenal Berbagai Border Radius, admin mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan Artikel Blogger, Artikel Efek CSS, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. Selamat membaca ya.

Judul : Mengenal Berbagai Border Radius
link : Mengenal Berbagai Border Radius

Mengenal Berbagai Border Radius

Tutorial Blogger dan SEO Blogger - Mengenal Berbagai Border Radius. Border radius banyak di gunakan untuk mempercantik tampilan suatu blog. Dengan border radius kita bisa membuat border pada postingan,widget,atau apa saja di dalam blog kita dengan bentuk yang berbeda.

Kita bisa membuat efek border tumpul pada sudut-sudut area, nah dengan efek tumpul itu maka border yang terlihat akan menjadi lebih indah untuk di pandang. Dengan kode css berikut ini anda bisa membuat border yang ada di blog anda menjadi lebih indah.

Kode border biasa:

<div style="background-color: #fcfcfc; border: 1px #c0c0c0 solid; padding: 10px;font-family: monospace; text-align: left;">Tulisan anda</div>

Dan tampilannya seperti ini :

Tulisan anda

Nah tampilan kotak di atas adalah bentuk standar dari border-nya, jika kita ingin menambahkan border radius di dalam-nya, anda tinggal masukkan beberapa kode border radius di bawah ini ke dalam kode border yang standar di atas.

Spesifikasi W3C, Opera 10.5+:

Metode 1: Dominasi Value

border-radius: 20px 20px 20px 20px;

border-radius: 20px 0 0 0;

border-radius: 0 20px 0 0;

border-radius: 0 0 20px 0;

border-radius: 0 0 0 20px;

Metode 2: Dominasi Properti

border-radius: 20px;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

border-bottom-left-radius: 20px;

Mozilla Firefox:

Metode 1: Dominasi Value

-moz-border-radius: 20px 20px 20px 20px;

-moz-border-radius: 20px 0 0 0;

-moz-border-radius: 0 20px 0 0;

-moz-border-radius: 0 0 20px 0;

-moz-border-radius: 0 0 0 20px;

Metode 2: Dominasi Properti

-moz-border-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

-moz-border-radius-bottomleft: 20px;

Safari & Chrome:

Metode 1: Dominasi Value

-webkit-border-radius: 20px 20px 20px 20px;

-webkit-border-radius: 20px 0 0 0;

-webkit-border-radius: 0 20px 0 0;

-webkit-border-radius: 0 0 20px 0;

-webkit-border-radius: 0 0 0 20px;

Metode 2: Dominasi Properti

-webkit-border-radius: 20px;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

Nah demikian Rentetan kode border radius yang bisa anda terapkan pada blog anda. Semoga artikel Mengenal Berbagai Border Radius ini bisa bermanfaat bagi anda.

Demikianlah artikel tentang Mengenal Berbagai Border Radius

Sekianlah artikel Mengenal Berbagai Border Radius kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.

Anda sekarang membaca artikel Mengenal Berbagai Border Radius dengan alamat link https://anakugoogle.blogspot.com/2012/02/mengenal-berbagai-border-radius.html

Tweet

Unknown