Memiliki sebuah blog dengan tampilan yang menarik, indah dan menawan merupakan impian banyak orang. Nah.., salah satu caranya yaitu dengan memberikan polesan efek melengkung di setiap border yang ada pada sebuah blog kita sehingga tampilannya semakin elegan dan indah dipandang mata.
cara membuatnya sebenarnya mudah dan sangat simple, kalian hanya tinggal menambahkan kode berikut pada bagian yang akan kalian rubah sudut garisnya :
-moz-border-radius : membuat seluruh sudut melengkung
-moz-border-radius-bottomright : membuat garis melengkung kanan bawah
-moz-border-radius-bottomleft : membuat garis kiri bawah melengkung
-moz-border-radius-topright : membuat garis melengkung kanan atas
-moz-border-radius-topleft : membuat garis melengkung kiri atas
Contoh: misalnya kita ingin menerapkan efek sudut melengkung pada header maka kodenya seperti ini.
header {
margin: 0 0 5px 0;
padding: 5px;
background-color: lavender;
border: 5px solid green;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; }
sayangnya tidak semua browser bisa menampilkan efek ini. Berikut penjelasannya.
-moz-border-radius : digunakan untuk Mozilla firefox
-webkit-border-radius : untuk Chrome dan Safari
-khtml-border-radius : untuk browser-browser lama yang mendukung kode ini
border-radius : untuk browser-browser baru yang mendukung.
kode ini
trik ini sudah banyak digunakan oleh blogger blogspot.
Semoga bermanfaat ya.
Sedikit tambahan dari saya. jika anda ingin mengganti garis bordernya...
border dashed = penulisannya border: 5px dashed
border solid = penulisannya border: 5px solid
border dotted = penulisannya border: 5px dotted
border double = penulisannya border: 5px double
border groove = penulisannya border: 5px groov
border ridge = penulisannya border: 5px ridge
border inset = penulisannya border: 5px inset
border outset = penulisannya border: 5px outset
Sekian.....
Title : Membuat efek sudut border melengkung
Description : Memiliki sebuah blog dengan tampilan yang menarik, indah dan menawan merupakan impian banyak orang. Nah.., salah satu caranya yaitu dengan ...