Tutorial Belajar CSS Bagian 19 : Cara Membuat Rounded Corners di CSS

0
1683

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 18 : Cara Menggunakan Media Types di CSS. Selanjutnya, kita akan mempelajari cara membuat rounded corners di CSS.

CSS3 Rounded corners digunakan untuk menambahkan sudut berwarna khusus ke body atau teks dengan menggunakan properti border-radius.

Sintaks sederhana dari rounded corners adalah sebagai berikut :

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}

Tabel berikut menunjukkan nilai yang mungkin untuk Sudut membulat sebagai berikut :

No.Nilai & Deskripsi
1border-radius
Elemen ini digunakan untuk mengatur 4 properti radius border
2border-top-left-radius
Elemen ini digunakan untuk mengatur border pojok kiri atas
3border-top-right-radius
Elemen ini digunakan untuk mengatur border pojok kanan atas
4border-bottom-right-radius
Elemen ini digunakan untuk mengatur border di pojok kanan bawah
5border-bottom-left-radius
Elemen ini digunakan untuk mengatur border sudut kiri bawah

Properti ini dapat memiliki 3 nilai. Contoh berikut menggunakan kedua nilai tersebut :

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti sudut pada corner

Kita dapat menentukan properti setiap sudut seperti yang ditunjukkan di bawah ini :

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan rounded corners di CSS.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.