Kode CSS Membuat Border HTML Dengan Efek Unik Super Keren

---

Border atau elemen batas dalam kode CSS adalah elemen penting dalam mendesain sebuah halaman web. Elemen border dapat digunakan untuk memisahkan atau menarik perhatian suatu konten di halaman web, sehingga memudahkan orang untuk memahami dan mengambil tindakan dari elemen yang ditampilkan.

Elemen border (batas) secara umum memiliki beberapa 10 style properti yang bisa langsung digunakan tanpa perlu melakukan modifikasi dalam penggunaan kode CSS. Properti CSS border-style menentukan tipe border yang akan ditampilkan. Ada sepuluh kemungkinan nilai yang dapat Anda gunakan untuk menyetel properti bergaya perbatasan. Mari kita lihat sekilas di bawah ini, berikut contoh style border yang umum dalam kode CSS :

Kode CSS border : 2px dotted #0083da;

A dotted border.

Kode CSS border : 2px dashed #0083da

A dashed border.

Kode CSS border : 2px solid #0083da;

A solid border.

Kode CSS border : 8px double #0083da;

A double border.

Kode CSS border : 8px groove #0083da;

A groove border.

Kode CSS border : 8px ridge #0083da;

A ridge border.

Kode CSS border : 8px inset #0083da;

An inset border.

Kode CSS border : 8px outset #0083da;

An outset border.

Kode CSS border : none;

No border.

Kode CSS border-style : dotted dashed solid double; border-width : 8px; border-color : #0083da;

A mixed border.

Properti border-style digunakan dalam CSS dan elemen HTML tertentu. Ini adalah properti singkatan untuk menyetel gaya garis untuk keempat sisi batas elemen. Untuk mengatur jenis garis untuk masing-masing sisi, gunakan border-top-style, border-right-style, border-bottom-style, or border-left-style. Penjelasan lengkap tentang properti CSS border bisa ditanyakan ke mbah google yaa sedangkan pada artikel ini hanya akan memberikan kode CSS beserta cara penggunaannya untuk membuat border dengan efek unik dan super keren.

Penggunaan border sebenarnya cukup luas tidak hanya sebagai pelengkap elemen HTML, border bisa juga dimodifikasi sehingga dapat menampilkan bentuk unik yang untuk menarik perhatian pengunjung halaman website atau blog.

Informasi Singkat

---

Dalam pengembangan web, model kotak CSS mengacu pada bagaimana elemen HTML dimodelkan dalam mesin browser dan bagaimana dimensi elemen HTML tersebut berasal dari properti CSS. Ini adalah konsep dasar untuk komposisi halaman web HTML. Pedoman model kotak dijelaskan oleh standar web World Wide Web Consortium (W3C) khususnya Kelompok Kerja CSS. Untuk sebagian besar akhir 1990-an dan awal 2000-an telah ada implementasi model kotak yang tidak memenuhi standar di browser utama. Dengan munculnya CSS2 pada tahun 1998, yang memperkenalkan properti ukuran kotak, sebagian besar masalah telah teratasi.

---

Sumber : Wikipedia

CSS Border Effect Laser Beam

CSS Border Effect 1 menggunakan tampilan warna dark blue neon serta di-imbangi dengan menggunakan animasi slide line retro yang mampu memberikan nuansa cyberpunk digital yang keren buanget untuk ditampilkan sebagai widget blog, seperti yang terlihat pada contoh di bawah ini.

CodeFlare

Life is like a <script></script>,
full of variables and functions, sometimes it gives you value and sometimes it produces undefined results. If life equals zero, then you may return from looping in sub routine.
x-o-x-o :cheers

<style>
.cfl-box-content-1 h2{
font-size:20px;
color:#d3e992;
}
.cfl-box-effect-1{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:300px;
height:300px;
background:#111845a6;
box-sizing:border-box;
overflow:hidden;
box-shadow:0 20px 50px rgb(23, 32, 90);
border:2px solid #2a3cad;
color:white;
padding:20px;
}
.cfl-box-effect-1 .cfl-box-content-1{
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:1px solid #4590c3;
padding:20px;
text-align:center;
box-shadow:0 5px 10px rgba(9,0,0,0.5);
}
.cfl-box-effect-1 span{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:block;
box-sizing:border-box;
}
.cfl-box-effect-1 span:nth-child(1){transform:rotate(0deg);}
.cfl-box-effect-1 span:nth-child(2){transform:rotate(90deg);}
.cfl-box-effect-1 span:nth-child(3){transform:rotate(180deg);}
.cfl-box-effect-1 span:nth-child(4){transform:rotate(270deg);}
.cfl-box-effect-1 span:before{
content:'';
position:absolute;
width:100%;
height:2px;
background:#50dfdb;
animation:cfl-animate-1 4s linear infinite;
}
@keyframes cfl-animate-1 {
0% {transform:scaleX(0);transform-origin:left;}
50%{transform:scaleX(1);transform-origin:left;}
50.1%{transform:scaleX(1);transform-origin:right;}
100%{transform:scaleX(0);transform-origin:right;}
}
</style>

<div class="cfl-box-effect-1">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="cfl-box-content-1">
<h2>CodeFlare</h2>
<p>text here...</p>
</div>
</div>

KETERANGAN :
Silakan disesuaikan kode CSS diatas untuk merubah warna text, background atau bentuk huruf dan ukurannya. Kode html bisa ditaruh sebagai widget blog atau sebagai elemen pada halaman blog.

CSS Border Effect Rainbow Box

Bentuk border pada CSS Border Effect 2 hanya menampilkan bentuk border warna rainbow tanpa ada animasi tambahan. Warna rainbow bisa disesuaikan pada pengaturan warna background menggunakan properti linear-gradien color. Sebagai contoh seperti yang terlihat di bawah ini.

CodeFlare

Plain and simple, no animation or drama, it is what it is and what you see is what you get. It's not that great, but you never know when you need it.

<style>
.cfl-box-effect-2{
width:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
padding:10px;
background:linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius:6px;
box-sizing:border-box;
box-shadow:0px 0px 5px 3px #111;
}
.cfl-content-2 h2{
font-size:20px;
color:#0083da;
text-transform:uppercase;
text-shadow: 1px 1px #fff;
}
.cfl-content-2{
background:#ffffff90;
padding:10px;
font-size:16px;
border-radius:4px;
box-shadow:0 0 0 3px rgba(255, 255, 255, .3);
}
.cfl-content-2 p{
text-align:justify;
}
</style>

<div class="cfl-content-2">
<h2>CodeFlare</h2>
<p>text here...</p>
</div>

KETERANGAN :
Silakan disesuaikan kode CSS diatas untuk merubah ukuran dimensi box, warna text, background atau bentuk huruf dan ukurannya. Kode html bisa ditaruh sebagai widget blog atau sebagai elemen pada halaman blog.

CSS Border Effect Neon Show

Pada Border Effect 3 ini menggunakan tampilan warna background dan border dengan efek animasi warna neon yang terlihat dinamis dan super keren. Memang terlihat agak rame tapi akan terlihat unik jika digunakan dengan tepat.

CodeFlare

Yesterday is history. Tomorrow is a mystery. Today is a gift. That’s why we call it ‘The Present’.. So enjoy your life, make it easy, and do what you have to do because time will never roll back.

<style>
.cfl-box-content-3{
position:relative;
margin:0 auto;
padding:0 5px;
background:#1e1e1e;
color:#f5f5f5;
text-align:justify;
border-radius:10px;
}
.cfl-box-content-3:before, .cfl-box-content-3:after{
content:'';
position:absolute;
left:-2px;
top:-2px;
background:linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000);
background-size:400%;
width:calc(100% + 4px);
height:calc(100% + 4px);
z-index:-1;
border-radius:inherit;
animation:cfl-effect-3 20s linear infinite;
}
@keyframes cfl-effect-3{
0% {background-position:0 0;}
50% {background-position:400% 0;}
100% {background-position:0 0;}
}
.cfl-box-content-3:after{filter:blur(50px);}
</style>

<div class="cfl-box-content-3">
<h2>CodeFlare</h2>
<p>text here...</p>
</div>

KETERANGAN :
Silakan disesuaikan kode CSS diatas untuk merubah ukuran dimensi box, warna text, background atau bentuk huruf dan ukurannya. Kode html bisa ditaruh sebagai widget blog atau digunakan sebagai notifikasi box pada halaman blog.

CSS Border Effect Geometric Flex

Selanjutnya adalah bentuk border yang boleh dibilang bentuk cekung dan cembung ditambah dengan animasi geometri dan efek hover yang sexy. Border bisa digunakan untuk segala keperluan blog kamu, mulai dari sekedar notifikasi sampai kotak informasi untuk pengunjung blog.

CodeFlare

Hey ! I know it's not perfect but you get the idea, it's only about you and your imagination to get this a better picture.

<style>
.cfl-box-content-4{
width:200px;
position:relative;
padding:10px;
background-color:#003af742;
color:#93e1d8;
text-align:center;
box-shadow: 10px 10px 42px 0 rgba(0,0,0,0.75);
}
.cfl-box-content-4:after, .cfl-box-content-4:before{
position:absolute;
top:0;
left:0;
mix-blend-mode:multiply;
filter:none;
z-index: -1;
content:'';
width:calc(100% + (50px * 2));
height:calc(100% + (50px * 2));
display: block;
animation: cfl-effect-4 10s ease-in-out infinite;
transform:translateX(-50px) translateY(-50px);
}
@keyframes cfl-effect-4 {
0%, 100% {-webkit-clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));}
50% {-webkit-clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);}
}

.cfl-box-content-4:after{
animation-delay: -5s;
background-color: #b18051;
clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
}
.cfl-box-content-4:before {
background-color: #AA4465;
clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
}
.cfl-box-content-4:hover:after{animation-delay: -0.1s;}
.cfl-box-content-4:hover:before, .cfl-box-content-4:hover:after{animation-duration: 0.2s;}
</style>

<div class="cfl-box-content-4">
<h2>CodeFlare</h2>
<p>text here...</p>
</div>

KETERANGAN :
Silakan disesuaikan kode CSS diatas untuk merubah ukuran dimensi box, warna text, background atau bentuk huruf dan ukurannya. Kode html bisa ditaruh sebagai widget blog atau digunakan sebagai notifikasi box pada halaman blog.

CSS Border Effect Candy Roll

Bentuk border yang efek yang kelima ini selain unik tapi juga memiliki animasi yang sangat menarik, menggunakan efek animasi warna diagonal yang bisa menggugah selera. Contoh efek border bentuk kelima ini bisa digunakan untuk berbagai tujuan, mulai dari notifikasi, informasi ringan hingga sebagai widget blog yang bisa ditampilkan pada halaman utama blog.

CodeFlare

At last but not lease a perfect candy pink border animation effect with creamy white flavor, a perfect combination if you know what I mean.

<style>
.cfl-box-5 .cfl-box-content-5{
height:100%;
display:flex;
align-items:center;
justify-content:center;
background-color:pink;
}
.cfl-box-5{
width:300px;
height:300px;
box-sizing:border-box;
padding:15px;
position:relative;
overflow:hidden;
}
.cfl-box-5::before{
content:'';
position:absolute;
width:150%;
height:150%;
background:repeating-linear-gradient(white 0%,white 7.5px,hotpink 7.5px,hotpink 15px,white 15px,white 22.5px,hotpink 22.5px,hotpink 30px);
transform:translateX(-20%) translateY(-20%) rotate(-45deg);
animation:effect-5 20s linear infinite;
}
.cfl-box-5 .cfl-box-content-5{
position:relative;
background-color:white;
flex-direction:column;
box-sizing:border-box;
padding:30px;
text-align:center;
font-family:sans-serif;
z-index:2;
}
.cfl-box-5,.cfl-box-5 .cfl-box-content-5{
box-shadow:0 0 2px deeppink,0 0 5px rgba(0, 0, 0, 1),inset 0 0 5px rgba(0, 0, 0, 1);
border-radius:10px;
}
.cfl-box-5 .cfl-box-content-5 h2{color:deeppink;}
.cfl-box-5 .cfl-box-content-5 p{color:dimgray;}
@keyframes effect-5 {
from{background-position:0;}
to{background-position:0 450px;}
}
</style>

<div class="cfl-box-5">
<div class="cfl-box-content-5">
<h2>CodeFlare</h2>
<p>text here...</p>
</div>
</div>

KETERANGAN :
Silakan disesuaikan kode CSS diatas untuk merubah ukuran dimensi box, warna text, background atau bentuk huruf dan ukurannya. Kode html bisa ditaruh sebagai widget blog atau digunakan sebagai notifikasi box pada halaman blog.

Demikian artikel blog tentang Kode CSS Membuat Border HTML Dengan Efek Unik Super Keren terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Incoming Search Term

Tutorial membuat kode CSS dan HTML border dengan efek rainbow, Kumpulan kode CSS border dengan bentuk unik dan menarik, Efek border keren untuk menambah daya tarik blog, Cara membuat border element dengan mudah, Kode CSS border unik, Kode HTML border dengan tampilan cyberpunk, Tampilan digital untuk efek border