CSS Border Effects
Create interesting border styles and effects
Introduction to CSS Border Effects
CSS offers a variety of properties to create interesting and creative border effects. Beyond the basic border properties, you can use border-radius, border-image, gradients, and more to enhance your designs.
This page demonstrates various border techniques and effects that can be applied to elements.
Basic Border Styles
CSS provides several built-in border styles:
Solid
border: 3px solid #5e72e4;
Dashed
border: 3px dashed #5e72e4;
Dotted
border: 3px dotted #5e72e4;
Double
border: 6px double #5e72e4;
/* Basic border styles */
.border-solid {
border: 3px solid #5e72e4;
}
.border-dashed {
border: 3px dashed #5e72e4;
}
.border-dotted {
border: 3px dotted #5e72e4;
}
.border-double {
border: 6px double #5e72e4;
}
Border Radius
The border-radius property allows you to create rounded corners:
Small Radius
border-radius: 8px;
Medium Radius
border-radius: 25px;
Large Radius
border-radius: 75px;
Circle
border-radius: 50%;
/* Border radius examples */
.border-radius-small {
border: 3px solid #5e72e4;
border-radius: 8px;
}
.border-radius-circle {
border: 3px solid #5e72e4;
border-radius: 50%;
}
.border-radius-custom {
border: 3px solid #5e72e4;
border-radius: 25px 10px 50px 0;
}
Multiple Borders
You can create multiple borders using box-shadow or outline:
Box Shadow
Using box-shadow
Outline
Using outline
/* Multiple borders using box-shadow */
.multiple-borders-box-shadow {
border: 3px solid #5e72e4;
box-shadow: 0 0 0 6px #ea5455, 0 0 0 9px #28c76f;
}
/* Multiple borders using outline */
.multiple-borders-outline {
border: 3px solid #5e72e4;
outline: 3px solid #ea5455;
outline-offset: 3px;
}
Gradient Borders
Create colorful gradient borders using CSS mask and background:
Linear Gradient
Linear gradient border
Border Image
Using border-image
/* Gradient border using mask */
.gradient-border-linear {
position: relative;
background-color: white;
z-index: 0;
}
.gradient-border-linear::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: 3px;
background: linear-gradient(to right, #5e72e4, #ea5455);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Gradient border using border-image */
.border-image-linear-gradient {
border: 15px solid transparent;
border-image-source: linear-gradient(to right, #5e72e4, #ea5455);
border-image-slice: 1;
}
Animated Borders
Create animated border effects using CSS animations:
Animated
Animated gradient border
/* Animated gradient border */
.animated-border::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: 3px;
background: linear-gradient(90deg, #5e72e4, #ea5455, #28c76f, #ff9f43, #5e72e4);
background-size: 400% 400%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: gradient-animation 5s ease infinite;
}
@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Border Hover Effects
Create interactive border effects on hover:
Hover Me
Border grows on hover
Hover Me
Border color changes on hover
Hover Me
Border style changes on hover
/* Border hover effects */
.hover-border-grow {
border: 3px solid #5e72e4;
transition: border-width 0.3s ease;
}
.hover-border-grow:hover {
border-width: 10px;
}
.hover-border-color {
border: 3px solid #5e72e4;
transition: border-color 0.3s ease;
}
.hover-border-color:hover {
border-color: #ea5455;
}
Creative Border Effects
Some creative border effects that combine multiple techniques:
Glow
Glowing border
Cutout
Cutout effect
/* Creative border effects */
.border-glow {
border: 3px solid #5e72e4;
box-shadow: 0 0 10px #5e72e4;
}
.border-cutout {
background-color: white;
box-shadow:
0 0 0 3px #5e72e4,
8px 8px 0 0 #ea5455;
}