29
Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.

Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.

Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:
Kode HTML

Anggap Disini Adalah Content.


Kode CSS
#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}

Hasil:

Anggap Disini Adalah Content.


Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
Sehingga kode CSS-nya menjadi seperti ini.
#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}
Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.


Anggap Disini Adalah Content.


Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.
- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/

Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.


1. Border-radius: 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;
2. Border-radius: 0px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;
3. Border-radius: 15px 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;
4. Border-radius: 0 15px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 15px;
5. Border-radius: 15px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

6. Border-radius: 0px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

7. Border-radius: 15px 0 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

8. Border-radius: 0 15px 15px 0;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;
Dan Lain Sebagainya........

Posting Komentar

  1. langsung pake neh,makasi broo......

    BalasHapus
  2. nice artikle :)

    Visit http://catatan-ariansyah.blogspot.com

    BalasHapus
  3. artikel yg bagus dan menarik ulasannya nie bro, dan aku suka dgn cara penulisannya yg lugas, dan sekalian bagi teman2 yg suka dengan film box office terbaru dan ter update tiap hari, silakan kunjungi situsnya loe, makasi juga buat admin disini ok, atas artikelnya mkasi dan keep blogging bro gbu.

    BalasHapus
  4. terima kasih sudah memberikan tutorial yang benar...saya sudah blog walking kemana-mana, notabene para pemegang tutorial blog top rank, tapi ternyata tutorialnya menyesatkan, cuma membuat bingung...(maaf jadi curhat nih...hehe)
    cuma disini yang benar-benar 'cespleng'....hasilnya langsung maknyus, sesuai yang saya harapkan dan memang sesuai dengan judul artikel blog ini.
    terima kasih kakak.
    salam blogger mania.

    BalasHapus
  5. terimakasih sangat membantu sekali sob

    BalasHapus
  6. suer deh, sangat bermanfaat nih iilmunya, dan langsung ane praktekin,
    thanks suer banget bro

    BalasHapus
  7. tenkyu om,
    sangat bermanfaat..
    btw ,kunjungi blog ane yoo
    nonymo.blogspot.com

    BalasHapus
  8. di letakkan di mana bro kode-kode tersebut,
    di postingan atau di edit html..?

    BalasHapus
  9. Mantap gan artikelnya
    sangat membantu.

    BalasHapus
  10. Makasih banyak nih buat tutorial singkatnya, sangat bermanfaat, ijin praktik langsung gan

    BalasHapus
  11. aku menyukai artikel ini sob, dari tadi nyari2 blog yang bahas sola ne gak nemu2, tapi akhrnya bisa nyampe juga kesini.

    BalasHapus
  12. mantap ni untuk di coba.. tq ya

    BalasHapus
  13. blog yang hebat, kalau untuk yang lengkung kiri atas doang mana ya gan? suwun

    BalasHapus
  14. Seperti dijelaskan diatas, border radius juga memiliki sifat individu, jadi untuk kanan atas tinggal tambahin aja kode:
    border-top-right-radius: 10px;

    10px bisa diganti dengan angka sesuai selera....

    BalasHapus
  15. thanks bro pencerahannya..

    untuk warnanya (yang bagian tumpulnya itu) ngikutin warna dari border itu sendiri y bro..?

    BalasHapus
  16. GAN ANE MSH PEMULA JADI MAAF NIH KODE TERSEBUT CARA MASUKINNYA GMNA GAN? MOHON PENCERAHANYA GAN

    BalasHapus
  17. nice info gan.. sukses slalu

    BalasHapus
  18. makasih banyak yaa, saya lagi buat content web jadinya ini sangat dibutuhkan :)

    BalasHapus
  19. sangat mencerahkan sekali min. terima kasih. hormat kami :D

    BalasHapus
  20. Ok, makasih banget gan, artikelnya, berhasil saya praktekkan, sukses selalu.

    BalasHapus
  21. Mantap gan nambah pengetahuan saya tentang Css. Thx gan

    BalasHapus
  22. ntappp gan... terima kasih infonya

    BalasHapus

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top