Membuat Kotak / Frame Menggunakan Border Radius Dengan HTML CSS


Kotak / Frame di blog biasanya dipakai untuk menampilkan border foto, menulis sintak dan lain-lain, dan Kotak / Frame biasanya berbentuk kaku dengan sudut yang lancip. Untuk menampilkanya dengan lebih cantik kita bisa membuat kotak / frame sudutnya dengan sedikit melengkung yaitu dengan menambahkan style HTML CSS karena akan digunakan di postingan blog. Style CSS yang akan digunakan yaitu dengan menambahkan perintah border radius.Setelah menambahkan border radius, kita bisa menambahkan ukuran pixel untuk menentukan seberapa besar sudut itu akan dirubah.

Seperti contoh berikut membuat kotak menggunakan DIV yang ditambahkan border radius pada style nya

<div style="height: 100px; width: 100px; background-color: green; border-radius: 30px;"></div>

dan hasilnya seperti ini

20px adalah besarnya pixel untuk membuat radius

Kita juga bisa mengatur sudut-sudut tertentu saja yang akan dibuat melengkung sudutnya dengan menambahkan perintah seperti berikut ;

border-top-left-radius: 30px; border-bottom-right-radius: 30px;

<div style="height: 100px; width: 100px; background-color: green; border: 6px solid brown; 
border-top-left-radius: 30px; border-bottom-right-radius: 30px;"></div>
border-top-left-radius: 30px; border-bottom-right-radius: 30px;

kode di atas untuk mengatur posisi sudut yang akan di rubah, dapat juga digunakan

border-top-right-radius dan border-bottom-left-radius

Warna background sendiri dapat disesuaikan dan diganti seperti dengan menambahkan warna gradien

Demikian Cara Membuat Kotak / Frame Menggunakan Border Radius Dengan HTML CSS. Semoga membantu

Advertisements

2 comments on “Membuat Kotak / Frame Menggunakan Border Radius Dengan HTML CSS

  1. Pingback: Cara Membuat Center Div Style | Hit Tech

Komentarnya please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s