Border dan radius

ok langsung aja cara membuat border ..  mau lihat contoh liat gmbar ini :



mau seperti itu ini kodenya :
jika ingin meletakan BORDER pada panah nomor 1 : cari kode   .post{   lalu masukkan kode berikut ini di dalam tanda kurung tersebut  

border: 2px solid red; 

jika ingin meletakan BORDER pada panah nomor 2 : cari kode   .post-title{   lalu masukkan kode ini di dalam tanda kurung tersebut   

border: 2px solid red;

jika ignin meletakan BORDER pada panah nomor 3 :  cari kode  .sidebar{   lalu masukkan kode ini di dlam tanda kurung tersebut  

border:2px solid red;


NB : 2px  itu ukuran besar garisnya
        red  itu warna garisnya


-----------------------------------------------------------------------------

Nah kalo itu cara buat bordernya, lalu bagaimana bordernya agar melengkung ? simak berikut ini :

1. Kode di bawah hanya akan bekerja jika Anda menggunakan Firefox atau browser lain yang mendukung Mozilla-moz-border-radius properti.

Example 1
-moz-border-radius: 1em;
Example 2
-moz-border-radius-topright: 2em; -moz-border-radius-topleft: 2em;
Example 3
-moz-border-radius: 2em 0;
Example 4
-moz-border-radius: 3em 1em;


2. Kode di bawah hanya akan bekerja jika Anda menggunakan Versi terbaru dari safari / juga bisa di Google Chrome.

Example 5
-webkit-border-radius: 1em;
Example 6
-webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px;
Example 7
-webkit-border-radius: 24px 0;
Example 8
-webkit-border-radius: 36px 12px;
Example 9
-webkit-border-top-right-radius: 50px 30px; -webkit-border-bottom-right-radius: 50px 30px;

3. Kode di bawah ni special untuk WebKit, Firefox dan Opera sekarang mendukung sejumlah fitur lain CSS3, termasuk dampak sederhana berikut dan transformasi. Untungnya, tidak seperti sudut dibulatkan, untuk bayangan dan transformasi ada tampaknya tidak menjadi kesepakatan tentang sintaks yang umum.

-webkit-box-shadow

Shadow Example
-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

4. Kode di bawah ini  bekerja di Firefox dan Opera memungkinkan Anda untuk menentukan tidak hanya sudut elips yang cocok, tetapi juga sudut elips yang berbeda dalam satu properti steno.

Example 8
-moz-border-radius: 36px / 12px; border-radius: 36px / 12px;
Example 9
-moz-border-radius-topright: 50px 30px; -moz-border-radius-bottomright: 50px 30px;
Ok sekian tutorial dari saya

What Next?

Related Articles