Membuat Efek Rainbow Border Dengan CSS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/08/2017

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.