Konsep Elemen CSS Border Radius

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:

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>