Skip to main content

Membuat Efek Rainbow Border Dengan CSS

Sebenarnya ini bukan border sebenarnya, namun akan terlihat seperti border pada sebuah kotak, bisa untuk kotak notifikasi ataupun lainnya.

Ini adalah div yang saling tindih dengan div paling luar menggunakan background warna-warni dan div atasnya dengan background satu warna. Padding dari div luar lah yang membuatnya menjadi seperti border. Makin besar padding maka makin besar pula efek border-nya.

Untuk membuat efek rainbow border ini bisa menggunakan style CSS di bawah ini.


.box {
  width: 100%;
  padding: 2px;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: 6px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
.content {
  background: #fff;
  padding: 12px;
  font-size: 16px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}

Dan HTML nya seperti di bawah ini.


<div class="box">
  <div class="content">
    <p>
      Nunc faucibus, velit sed dapibus molestie, odio tortor tempor risus, quis pellentesque odio felis ac augue. Maecenas lobortis lorem urna, sit amet iaculis nibh feugiat sed. Aenean bibendum tristique ante, eu commodo orci condimentum non. Donec dapibus, tortor vitae vulputate accumsan, nisi lacus malesuada turpis, vitae convallis ligula eros vitae sapien. Duis massa elit, pellentesque eget leo ut, ornare blandit nisl. Donec hendrerit scelerisque accumsan. Pellentesque vehicula eu tellus quis tristique.
    </p>
  </div>
</div>

Makin besar padding pada .div maka makin besar pula efek border-nya. Untuk background bisa Anda atur sendiri untuk warna yang ingin ditampilkan.

Penampakannya seperti pada Fiddle di bawah ini.


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB