Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Rabu, 28 Maret 2012

Membuat Border Konten Dengan Css

Kali ini kita akan membahas mengenai pembuatan border konten dengan css, sebenarnya mudah, namun tidak ada salahnya berbagi, pembuatan border ini berfungsi sebagai pembatas konten sehingga lebih terlihat menarik dan rapih, namun perlu Anda ketahui setiab web browser memiliki script sendiri untuk dapat terbaca dan terbentuk sebuah border yang di inginkan, berikut sedikit tutorial pembuatan border :


Border dengan sudut border lancip :
Cukup dengan menambahkan Css :

 border: 2px solid #434343;

Border dengan sudut melengkung ( Rounded Corner ) :
Tambahkan Css :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;

Sehingga menjadi :

 border: 2px solid #434343;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;

Border dengan beberapa sudut yang melengkung :
Tambahkan Css :
 Melengkung Di Sudut Kanan Atas :
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius:10px;

Melengkung Di Sudut Kiri Atas :
-webkit-border-top-leftt-radius: 10px;
-moz-border-top-left-radius: 10px;
border-top-left-radius:10px;

Melengkung Di Sudut Kanan Bawah :
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius:10px;

Melengkung Di Sudut Kiri Bawah :
-webkit-border-bottom-left-radius: 10px;
-moz-borderbottom-left-radius: 10px;
border-bottom-left-radius:10px;

Contoh :
Melengkung Di Sudut Kiri Atas dan Kanan Bawah :
 border: 2px solid #434343;
-webkit-border-top-leftt-radius: 10px; -moz-border-top-left-radius: 10px; border-top-left-radius:10px; -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; border-bottom-right-radius:10px;

Pengaturan :
Teks warna hijau merupakan ukuran tebal border dengan satuan Px.
Teks warna biru merupakan jenis border, Contoh :

 border: 4px solid #434343;

 border: 4px double #434343;

 border: 4px ridge #434343;

 border: 4px dotted #434343;

 border: 4px dashed #434343;

 border: 4px groove #434343;

 border: 4px inset #434343;

 border: 4px outset #434343;

Dan teks warna kuning merupakan kode warna, untuk border.

Sekian dulu tutorial membuat border konten dengan Css.
Selamat Mencoba, Semoga Bermanfaat.

10komentar:

Яіѕӓӏађаті Тђё Ѕіӏеисё ԁіӓяуmengatakan...

oke gan makasih atas ilmunya, sukses selalu buat kamu :)

SASTRA REMAJA 11mengatakan...

Oke gan. langsung dicoba. makasih infonya. :)

duniasharingmengatakan...

nambah lagi nih ilmunya hehehe..

terima kasih kang scriptnya

Zero CodeXgigasmengatakan...

sip, ada tambahan script border dari mas nthoeng..

saya ambil ya? makasih sudah berbagi

pasarherbalmengatakan...

OK sob...tutornya mantap...kadang perlu juga kita yang seperti ini...sekalian tanya sob...tutor postingan terkait kaya punya sobat ada ga...?

randy yang penting sharemengatakan...

jah gan kebanyakan iklannya disni,jadi kurang nyaman nih,anyway thanks nih ilmu2nya

Muhammad Syamsuddin el Zainmengatakan...

eh, ngletakin kode itu dimananya ya? masih newbie nih, mohon bantuannya.

Galihmengatakan...

Di dalam kode css konten atau bisa juga pake' div style, contoh :

<div style="background:#434343;width:50px;height:100px; border: 2px solid #434343;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;">Isi Konten Di Sini</div>

Script SEO Blogspot ( smart Link )mengatakan...

Mantap infonya gan,ma kasih

PULSA MURAH CHIP SAKTImengatakan...

manteb gan artikelnya,... terima kasih

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore