Rounded Corner - Fitur Khusus pada CSS3

Dua Jendela Tuesday, November 16, 2021

12. Fitur Khusus pada CSS3

Beberapa bahasan tentang fitur unggulan dari CSS3 yang mempunyai fungsi penting pada web.

12.1 Rounded Corner

12.2 Border Image

12.3 Shadow

12.4 Gradient

12.5 Text Effect

12.6 Web-Font

12.7 2D Transform

12.8 3D Transform

12.9 Transition

12.10 Animation

12.11 Flexbox Layout

12.12 Multiple Columnt

12.13 Media Query

Pembahasan 13 bagian ini akan dijelaskan satu per satu agar kita lebih paham lagi.

12.1 Rounded Corner

Rounded corner = sudut box menjadi melengkung (rounded) dengan menggunakan property border-radius. Property ini pun dapat kita gunakan untuk membuatan elemen berbentuk lingkaran.

Berikut adalah contoh script dengan nama file rounded corner.html

<html>
   <head>
      <style type="text/css">
         div{
            background: blue;
            width: 200px;
            height: 200px;
            margin-left: 20px;
            float: left;
         }
         .box1{ border-radius: 20px; }
         .box2{ border-radius: 50%; }
      </style>
   </head>
   <body>
      <div class="box1"></div>
      <div class="box2"></div>
   </body>
</html>