Konsep Elemen CSS Border Radius - Elemen kode CSS border-radius biasanya digunakan untuk mengubah bentuk border pada sisi-sisi siku box (square) menjadi tumpul (tidak tajam). Dalam hal ini, border merupakan garis yang membentuk sebuah persegi, sedangkan radius merupakan jarak seluruh area pada border tersebut. Seperti tampilan gambar screenshort berikut:


Square Box pictures



Top content, view - Kenapa Alexa Rank Tak Kunjung Mengecil?


Disana terdapat 4 buah titik yang membentuk siku yaitu top-left, top-right, bottom-left dan bottom-right. Elemen itulah yang akan kita ubah efeknya menjadi tumpul (radius) dengan konsep penyusunan CSS seperti ini:

border-radius: 10px 15px 20px 25px;

# Nilai pixel (10px) yang pertama adalah top-left,
# Nilai pixel (15px) yang kedua adalah top-right,
# Nilai pixel (20px) yang ketiga adalah bottom-left,
# Nilai pixel (25px) yang keempat adalah bottom-left,


Seperti Tampilan Bentuk Dan Ragam Ribbon Box Berbagai Efek di artikel saya sebelumnya, maka dengan memahami nilai mana yang akan kita ubah efeknya menjadi tumpul dalam penggunaan elemen CSS border-radius diatas, akan dengan mudah kita menciptakan border box yang lebih keren dari sebelumnya.


Berikut beberapa Konsep Elemen CSS Border Radius, serta tahap penyusunan struktur kode dalam membuat border-box keren seperti ini di blog Anda:


<style type='text/css'>
#square {
  width: 100px;
  height: 100px;
  background: red;}
</style>
<div id="square">
</div>


<style type='text/css'>
#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50px;}
</style>
<div id="circle">
</div>


<style type='text/css'>
#oval {
  width: 200px;height: 100px;
  background: red;
  border-radius: 100px / 50px;}
</style>
<div id="oval">
</div>


<style type='text/css'>
#triangle-up {
  width: 0;height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;}
</style>
<div id="triangle-up">
</div>


<style type='text/css'>
#triangle-topleft {
  width: 0;height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;}
</style>
<div id="triangle-topleft">
</div>

<style type='text/css'>
#star-five {
  margin: 50px 0;
  position: relative;
  display: block;color: red;
  width: 0px;height: 0px;
  border-right:100px solid transparent;
  border-bottom:70px solid red;
  border-left:100px solid transparent;
  transform:rotate(35deg);}

#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;width: 0;
  top: -45px;left: -65px;
  display: block;content: '';
  transform: rotate(-35deg);}

#star-five:after {
  position: absolute;
  display: block;color: red;
  top: 3px;left: -105px;
  width: 0px;height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';}
</style>
<div id="star-five">
</div>


<style type='text/css'>
#hexagon {
  width: 100px;height: 55px;
  background: red;
  position: relative;}

#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;left: 0;
  width: 0;height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;}

#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;left: 0;
  width: 0;height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;}
</style>
<div id="hexagon">
</div>


<style type='text/css'>
#octagon {
  width: 100px;height: 100px;
  background: red;
  position: relative;}

#octagon:before {
  content: "";
  position: absolute;
  top: 0;left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid #fff;
  border-right: 29px solid #fff;
  width: 42px;height: 0;}

#octagon:after {
  content: "";
  position: absolute;
  bottom: 0;left: 0;
  border-top: 29px solid red;
  border-left: 29px solid #fff;
  border-right: 29px solid #fff;
  width: 42px;height: 0;}
</style>
<div id="octagon">
</div>


<style type='text/css'>
#heart {position:relative;width:100px;height:90px;}
#heart:before,
#heart:after {
  position: absolute;
  content: "";left: 50px;
  top: 0;width: 50px;
  height: 80px;background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;}

#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin :100% 100%;}
</style>
<div id="heart">
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Konsep Elemen CSS Border Radius
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

16 komentar

  1. ane belum ngerti ni sis,apa pungsi square box,,mohon ijin untuk mempelajarinya,..terimakasih atas saran2 sis,..ternyata bisa juga blog ane rank satu,...
    http://team2air.blogspot.com

    BalasHapus
    Balasan
    1. Masalah coding css dan teman temanya Mbak
      Devy tau banyak Mas Kos.. sungguh kreatif (h)

      Hapus
    2. mas saud kayaknya masternya nih...bagi2 ilmunya dong mas d blognya njenengan :D

      Hapus
  2. ini merupakan konsep dalam membuat border box dengan efek tumpul pada sisi box..

    terimakasih kembali mas, Devy ucapkan "SELAMAT" ya buat blognya yang sudah mendapat rank satu.. semoga sukses..
    amin...

    BalasHapus
  3. Konsep elemen css border
    menggeser sudut garis dengan kode juga.. ya Vy..!, ahh..blom bisa dicerna inih..angka disusun,.,,huruf dirangkai..jadi garis, digabung tulisan ini,..digabung dgn tulisan itu jadi gambar..bertapa 10 tahun,pasti nda bisa2 juga.. ;(

    jadi berkhayal nih Vy..andai bisa pake intonasi suara untuk pembuatannnya..
    emot jempol empat manaaa...!

    BalasHapus
    Balasan
    1. hasil dari rangkaian kode diatas, sudah devy tampilkan, bagaimana, apakah mas aldino sudah paham.? hehe..!!

      Hapus
    2. make jsfidle biar gampang melihat hasilnya. bisa juga buat berkreasi sekalian belajar gan.

      Hapus
    3. biasanya untuk efek-efek tertentyu saja mas saya menggunakan jsfiddle.

      Hapus
  4. Urusan coding css dan html code lainya Mbak Devy jagonya deh top
    Saya nyimak dengan baik saja dulu Mbak. sambil belajar makasih
    sudah berbagi ke kita kita tentang css border radius :)

    BalasHapus
    Balasan
    1. jangan begitu attuh mas saud, devy disini berbagi, bukan memberikan sesuatu agar dikatakan jago atau apalah, devy juga masih belajar kok. hehe.. :)

      Hapus
  5. ah saya belum paham yang beginian...saya masih harus menimba ilmu kepada mbak devi..masih harus...tapi saya suka kok, saya bisa belajar banyak ha di sini,dan itu yang membuat saya selalu betah berlama2 di sini...izin nyimak artikel lainnya ya mbak :D

    BalasHapus
  6. jurus yg kemaren juga masih dipelajari, dah dtg jurus ampuh baru...

    BalasHapus
    Balasan
    1. biar sahabat lainnya cepat paham teh,
      ini hanya sekedar membentuk box yang dasarnya persegi menjadi sebuah objek gambar dengan lipatan.

      Hapus
  7. Kunjungan malam, maaf belum sempet baca artikelnya soalnya bnyk tugas hehe, ijin bookmark dulu hehe

    BalasHapus
  8. Buat bahan pembelajaran CSS,
    blum bisa bisa...

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK