Cara membuat sudut melengkung dengan CSS

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........

Saat ini anda sedang membaca artikel : Cara membuat sudut melengkung dengan CSS
Rating: 4.5
Di tulis Oleh: Jeun Chi Rei Ki
. Kalau kalian suka artikel Cara membuat sudut melengkung dengan CSS ini, Anda bisa membantu menyebar luaskannya dengan meng-klik tombol Facebook Like, Share, Tweet Atau kasih Google + yang ada dibawah postingan ini. Itu Sudah cukup untuk mengganti kata terima kasih..

23 comments:

hariestelle mengatakan...

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

Anonim mengatakan...

nice artikle :)

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

download film mengatakan...

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.

Djoko Bhekti Subagyo mengatakan...

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.

m-fahrin mengatakan...

terimakasih sangat membantu sekali sob

han mengatakan...

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

epung AS mengatakan...

kereen :)

pemeliharaan mesin mengatakan...

semoga bermanfaat

Naldi Ceansean mengatakan...

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

Anonim mengatakan...

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

hisbu mengatakan...

Mantap gan artikelnya
sangat membantu.

Belajar SEO dan Menulis Blog mengatakan...

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

hydro filter mengatakan...

nice info gan
tanks..

anastanicha mengatakan...

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

johanes mengatakan...

mantap ni untuk di coba.. tq ya

pigg indonesia mengatakan...

thanks gan

ahmad maryuki mengatakan...

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

Jeun Chi Rei Ki mengatakan...

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....

Oemar mengatakan...

thanks bro pencerahannya..

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

masterz-seo mengatakan...

langsung di coba sob..

Gie Achmad mengatakan...

thx kk infonya :)

emhan doank mengatakan...

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

itank mengatakan...

nice info gan.. sukses slalu

Poskan Komentar

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.