Pages

Friday, 26 December 2014

Border Radius CSS - Membuat Sudut Melengkung dengan CSS

Ingin membuat objek dengan melengkung adalah sangat mudah dengan CSS. Mungkin Anda ingin memodifikasi navigasi dengan sudut lengkung, ataupun border pada objek, ikuti tutorial saya kali ini. Sebuah objek diatur sudut lengkungnya dari tiap sudutnya. Jadi dari 4 sudut dapat diatur secara masing-masing ataupun sama semua.
Berikut langsung saya contohkan saja biar lebih paham.

misal script HTML nya seperti berikut:
<html>
<head>
<title>Belajar Border Radius | alfaruqdeveloper.blogspot.com</title>
</head>

<body>
<div class="objek1"></div>
<div class="objek2"></div>
</body>
</html>

Membuat seluruh sudut melengkung
Jadi sudut objek akan sama semua lengkungannya.
Masukkan script css berikut. Saya menggunakan embedded css jadi script css nya dimasukkan di dalam tag head pada file html.
<head>
     <style>
          .objek1 {
          width: 100px;
          height: 100px;
          float: left;
          margin: 10px;
          background-color: blue;
          }
          .objek2 {
          width: 100px;
          height: 100px;
          float: left;
          margin: 10px;
          background-color: red;
          border-radius: 10px 10px 10px 10px;
          -moz-border-radius: 10px 10px 10px 10px; /*-moz- agar dapat tetap muncul pada browser mozilla*/
          -webkit-border-radius: 10px 10px 10px 10px; /*-moz- agar dapat tetap muncul pada browser google chrome*/
          }









maka semua sudut di objek2 (background merah) akan melengkung. Bandingkan dengan objek1 (background biru) yang tidak melengkung sudutnya.

Membuat per bagian sudut melengkung berbeda
Kita dapat mengatur kelengkungan masing-masing sudut. Otak-atik style di class objek 2 saja menjadi seperti berikut ini.

          .objek2 {
          width: 100px;
          height: 100px;
          float: left;
          margin: 10px;
          background-color: red;
          border-radius: 10px 0 0 0;
          -moz-border-radius: 10px 0 0 0; /*-moz- agar dapat tetap muncul pada browser mozilla*/
          -webkit-border-radius: 10px 0 0 0; /*-moz- agar dapat tetap muncul pada browser google chrome*/
          }

hasilnya








maka yang melengkung adalah sudut kiri atas. Dari script yang saya contohkan dapat dilihat bahwa ada urutan untuk mengatur tingkat kelengkungan sudutnya "10px 0 0 0". Di CSS ada aturan seperti saat menentukan margin misal margin: 10px 5px 10px 5px; yang berarti berturut turut dari margin atas, margin kanan, margin bawah, margin kiri bernilai 10px, 5px, 10px, 5px. Urutan tersebut berdasarkan arah jarum jam. Jadi pada border radius pun juga begitu. Urutan dimulai dari sudut kiri atas, sudut kanan atas, sudut kanan bawah, sudut kiri bawah.

Untuk mencoba variasi yang lain, cobalah membuat lengkung seperti berikut agar lebih paham:



Mungkin cukup sekian saja tutorial dari saya mengenai border radius css, atau bisa disebut rounded corner, atau sudut melengkung, terserah yang menyebut :D, semoga bermanfaat. Selamat berkarya :)

0 comments:

Post a Comment