Cara Membuat Sudut Border Melengkung Dengan CSS

47 Komentar



Cara Membuat Sudut Border Melengkung Dengan CSS. Saya ucapkan mohon maaf karena penerbitan post Mas Yusa agak telat dikarenakan sibuk uprak uprak template di blog baru Si-naruto. Hehehehe..sangking sibuknya tadi malam cuma tidur 1 jam doang (Whattt....!!!). Hahaha :D Iya, karena uprak uprak template nya 80%. Wah ini ko jadi promosi blog baru ya... hahaha

Kali ini Mas yusa akan mengeshare tutorial Cara Membuat Sudut Border Melengkung Dengan CSS. Sobat pasti sudah sering melihat border blog sobat yang sudutnya melengkung Contohnya : Blog Saya (Hahaha). Membuat sudut border blog kita melengkung membuat blog kita lebih styles alias keren. Jika sobat ingin membuatnya baca selengkapnya di bawah ini.

Cara 1 Membuat Sudut Border Melengkung :
-webkit-border-radius: 8px;-moz-border-radius: 8px;
Mangsut dari -webkit adalah kode untuk memanggil border melengkung di  Google Chrome. Sedangkan -moz kode untuk memanggil border melengkung di Mozzila. Jika ingin menentukan radius kelengkungan, silahkan sobat ganti yang berwarna merah (8xp).

Maka jika di satukan dengan kode border akan jadi seperti ini :
border: 2px solid #ff0000;
-webkit-border-radius: 8px;-moz-border-radius: 8px;
Cara 2 Membuat Sudut Border Melengkung :
Jika sobat ingin membuat sudut border ada yang melengkung atau ada yang tidak melengkung, sobat gunakan kode di bawah ini :

-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft; 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-right-radius: 0px;

Top Left : kiri atas, Bottom Right : bawah kanan, Top Right : Atas Kanan, Bottom Left : Bawah kiri. Mangsut dari 0px adalah tidak beradius, atau tidak melengkung.

Maka jika disatukan dengan kode border akan jadi seperti ini :

border: 2px solid #ff0000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft; 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-right-radius: 0px;

 Sekian tutorial dari Mas yusa yang telat ini. Semoga bermanfaat bagi anda yang membutuhkan maupun belajar.
Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Cara Membuat Sudut Border Melengkung Dengan CSS dan anda bisa menemukan artikel Cara Membuat Sudut Border Melengkung Dengan CSS ini dengan url http://masyusa.blogspot.com/2012/07/cara-membuat-sudut-border-melengkung.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Sudut Border Melengkung Dengan CSS ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Membuat Sudut Border Melengkung Dengan CSS sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar


47 comments

July 25, 2012 at 3:06 AM

mantap

July 25, 2012 at 3:10 AM

waw info bermanfaat :D
nice share sob :D

July 25, 2012 at 3:57 AM

@Darmawan SaputraMakasih dah komen walaw singkat.... :D

July 25, 2012 at 3:57 AM

@Imam HidayatHahaha iya sob. :D

July 25, 2012 at 4:24 AM

waahhh info bagus neeh sob.. ijin sedot yah.. wkwkwkkk

July 25, 2012 at 7:44 AM

Artikel menarik mas..thanks sudah berbagi ilmu..saya bookmark dulu yach mas nnti kapan2 izin copy artikelnya mas..

July 25, 2012 at 9:04 AM

Udah pernah saya coba sob,. :D
Thanks :)

July 25, 2012 at 9:21 AM

Makasih mas Tutorialnya..

Oh ya ma, link mas sudah sukse saya pasang di sidebar

July 25, 2012 at 6:26 PM

Coba ah :D

July 25, 2012 at 7:00 PM

@aryocahyalesmanaSilahkan pak bos... :D

July 25, 2012 at 7:01 PM

@MansyurSilahkan kalo memang post ini bermanfaat.. :)

July 25, 2012 at 7:01 PM

@MisbahudinSama sama sob... :)

July 25, 2012 at 7:01 PM

@Cadis HangoluanOke meluncur ke blog sobat... :D

July 25, 2012 at 7:02 PM

@MotamatikaSilahkan sob.. :D

July 26, 2012 at 1:29 AM

nyimak aja mas..
maaf guestbooknya ane kgak kliatan..coz cuma pak

July 26, 2012 at 2:21 AM

Wahhh keren niee Sobb.. ajibb dahhh

July 26, 2012 at 2:22 AM

nyimakkk ahhhhh...

July 26, 2012 at 4:04 AM

@payakhmadGpp... :)

July 26, 2012 at 4:04 AM

@Ada ilmuHahahaha :D Makasih dah mampir sini :)

July 26, 2012 at 4:05 AM

@galedegSilahkan sob... :)

July 26, 2012 at 10:52 AM

wahhh sudah di terapkan nih sobat.....

July 26, 2012 at 7:22 PM

@Ehwansah JailaniHehehe... :D Makasih aja dah mampir. :)

July 26, 2012 at 10:12 PM

mantap sob..
kayaknya keren ni..

July 27, 2012 at 12:12 AM

keren sob tutornya ...

July 27, 2012 at 6:48 PM

@efliandaIya dong bro.. :)

July 27, 2012 at 6:49 PM

@Say No To Maho BlogsMakasih dah main kesini/... :)

July 27, 2012 at 9:08 PM

nice post :)

July 28, 2012 at 1:50 PM

border melengkung bisa menambah keindahan tampilan blog...nice share sobat :)

July 28, 2012 at 6:34 PM

@chanoveeMakasih. :)

July 28, 2012 at 6:35 PM

@BlogS of HariyantoBener tuh... :) setuju banget :D

July 30, 2012 at 5:40 AM

Memang saya sudah terapkan di blog saya....
tapi....
Nice share bagi yang masih awal-awal ngeblog.....

July 30, 2012 at 4:03 PM

Wah Keren Mass Nice Shared.., Mungkin Nanti akan saya Praktekan... hehehe :)

July 30, 2012 at 6:38 PM

@Aspar69Sama sama pak aspar.... :)

July 30, 2012 at 6:38 PM

@Dark OptimusSilahkan mas bro! Kalo mau dipraktekan :D Dengan senang hati

August 10, 2012 at 12:54 AM

i like this

August 26, 2012 at 5:09 AM

@Yusa SyihabJangan panggil saya pak sob, saya masih kelas 2 SMP lho.... :D

August 29, 2012 at 4:51 AM

Wah,sob ane masih bingung nih. Terus apakah cara ini bisa dibuat untuk template blog kita sob?
Sukses buat blog barunya yah sob :)

September 16, 2012 at 7:27 AM

Ternyata begitu caranya ya pak...
apakah cara ini berfungsi untuk semua jenis template blog pak?

salam,

December 13, 2012 at 4:15 AM

widih yahud nih mas, langsung dicoba deh o/

December 27, 2012 at 5:04 AM

ijin praktek gan..

sikat 69 myus,wahh,.sekarang udah semangat ngeblog lg,..hahahaha

January 12, 2013 at 5:28 AM

keren sob tugas sukses

January 12, 2013 at 5:30 AM

kodenya agak rumit juga mas,..tapi tetap prakteklah hehehehpk,..mas sikat penampakan disini hahahayyy

January 12, 2013 at 5:31 AM

artikel yg menarik

January 12, 2013 at 5:35 AM

Following sukses ke-310. Follback Bos

June 30, 2013 at 10:22 AM

terimakasih . sekarang saya mengerti berkat tulisan anda sayamngrti. tlong perbnyak tutorial gan. thanks

Post a Comment

Silahkan kalian berkomentar,namun tetap jaga kesopanan dengan tidak melakukan komentar spam (•͡˘˛˘ •͡)┌П┐ .
Untuk yang tidak mempunyai akun apapun,anda bisa gunakan Anonim (✿◠‿◠)...
Untuk membalas komentar/reply akan keluar Pop Up, jangan hapus kode yang ada di kotak komentar
\\▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼//

Welcome to: Mas Yusa Blog | Twitter: Yusa_Syihab & Google+: Yusa Syihab
 
Follow Me

English
Japanese
Korean
Arabic
Chinese Simplified

Kembali Ke Atas Copyright © 2012 | Template Platinum Theme Modified by Mas Yusa