Home » » Mengenal Berbagai Border Radius

Mengenal Berbagai Border Radius



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. :)


0 comments:

Post a Comment

Visitor

RECENT POSTS

Followers