Cara Membuat Border Warna Warni dengan Bootstrap

24/09/2017    Risman Hakim    2309     Website

Membuat border pada sebuah objek sangatlah mudah, apalagi buat kalian yang sudah familiar dengan teknologi CSS3, dengan CSS3 inilah kita bisa membuat berbagai macam border, mulai dari warna, jenis border dan lain sebagainya. Nah, pada kesempatan kali ini saya akan memberikan sedikit tutorial sederhana tentang bagaimana cara membuat border warna warni dengan Bootstrap, didalam kasus ini sengaja dibuat dengan framework Bootstrap karena akan lebih memudahkan dalam mendesain border nya. Baiklah simak uraiannya berikut ini.

Untuk membuat border pada kasus ini, kita akan sediakan objek gambar yang nantinya akan diberikan border, silahkan kalian bisa siapkan beberapa gambar, disini saya sudah menyiapkan satu buah gambar sebagai berikut.

Cara Membuat Border Warna Warni dengan Bootstrap

Setelah bahan-bahan telah tersedia, selanjutnya adalah tahapan membuat kode-kode seperti berikut ini, langkah pertama kita akan membuat struktur HTML Bootstrap seperti berikut.

<div class="container image">
    <div class="row center-block">
        <div class="col-md-4">
            <div class="red">
                <div class="blue">
                    <img src="images.jpg" class="img-responsive img-circle">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="red">
                <div class="blue">
                    <img src="images.jpg" class="img-responsive img-circle">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="red">
                <div class="blue">
                    <img src="images.jpg" class="img-responsive img-circle">
                </div>
            </div>
        </div>
    </div>
</div>

Silahkan isikan gambar yang sudah disiapkan tadi pada kode img src, nah, setelah membuat kode HTML seperti diatas, langkah berikut nya adalah ketikan kode CSS3 berikut untuk membuat border pada sisi objek gambar.

.container {margin-top: 30px;}
.image img {
    border: 5px solid #f90;
}
.image .blue {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border:10px solid blue;
}
.image .red {
    width: 220px;
    height: 220px;
    border-radius: 110px;
    border:10px solid red;
    z-index: -999;
    position: relative;

Setelah semua kode HTML dan CSS3 diketikan, langkah terakhir simpan file kemudian buka pada broser masing-masing dan lihat hasilnya, maka akan terlihat seperti gambar berikut.

Cara Membuat Border Warna Warni dengan Bootstrap

Kalau hasilnya sama dengan gambar diatas, berarti kode yang diketikan sudah sesuai. Selesai

Bagaimana, cukup mudah bukan cara membuatnya, baik sampai disini tutorial sederhana mengenai cara membuat border warna warni dengan Bootstrap, semoga bermanfaat dan selamat mencoba.

Artikel, Web Design, HTML CSS, Tips dan Trik, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More