12+ CSS Border Animation Examples

This code showcases 12 CSS border animation examples. It creates various border effects on shapes. Using hover, it triggers dynamic border changes. The code employs CSS animations to create eye-catching effects. It helps learn CSS border animations and transitions.

How to Create CSS Border Animation Examples

1. First of all, load the Normalize CSS and Google Fonts by adding the following CDN links into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">

2. Set up the HTML structure containing a grid of animated boxes. Each box represents a different border animation example.

	<div class="warning">
		This page uses <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" title="CSS Grid Layout" target="_blank">CSS Grid Layout</a>. If you are reading this message, your browser does not support this feature and you may not be able to see a grid of example boxes. You can check the browser compatibility <a href="http://caniuse.com/#feat=css-grid" title="Can I Use CSS Grid Layout" target="_blank">here</a>.
	</div>
	<h1>Simple Animations using CSS Borders</h1>
	<h3>Hover your mouse on the examples below to see the effect.</h3>
	<div class="grid-container">
		<div>
			<h2>1. Interchange border colors</h2>
			<div class="box box1"></div>
		</div>
		<div>
			<h2>2. Expand width</h2>
			<div class="box box2"></div>
		</div>
		<div>
			<h2>3. Expand width &amp; height</h2>
			<div class="box box3"></div>
		</div>
		<div>
			<h2>4. Rotate border colors using keyframe animations</h2>
			<div class="box box4"></div>
		</div>
		<div>
			<h2>5. Four colored circle</h2>
			<div class="box box5"></div>
		</div>
		<div>
			<h2>6. Two colored triangle</h2>
			<div class="box box6"></div>
		</div>
		<div>
			<h2>7. Two colored square</h2>
			<div class="box box7"></div>
		</div>
		<div>
			<h2>8. Missing top border</h2>
			<div class="box box8"></div>
		</div>
		<div>
			<h2>9. Down Arrow</h2>
			<div class="box box9"></div>
		</div>
		<div>
			<h2>10. Left Arrow</h2>
			<div class="box box10"></div>
		</div>
		<div>
			<h2>11. Up Arrow</h2>
			<div class="box box11"></div>
		</div>
		<div>
			<h2>12. Right Arrow</h2>
			<div class="box box12"></div>
		</div>
	</div>

	<footer>
		<a href="https://github.com/mpsinghk/animations-using-css-borders" title="Fork on GitHub" target="_blank">Fork on GitHub</a>
	</footer>

3. The following CSS code defines the animations for each box. It uses classes like .box1, .box2, etc., to target specific elements. Modify the styles for each .box class to change the border effects on hover or focus. Experiment with changing border widths, colors, and shapes to create unique animations.

Explore the keyframes defined for certain animations (@keyframes rotate-borders) to understand how the borders transition.

/* Base
------------------------------------------------------- */
body {
  font-family: 'Quicksand', sans-serif;
  font-size: calc(16px + 0.3vw);
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  padding: 40px 30px 30px;
}

/* Typography
------------------------------------------------------- */
h1 {
  font-size: 3.2em;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 0.3em;
}

h2 {
  font-size: 1.2em;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 0.8em;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  color: #00a7e3;
}

/* Footer
------------------------------------------------------- */
footer {
  font-size: 0.9em;
  padding: 20px;
  margin-top: 50px;
  border-top: 1px solid #ccc;
}

/* CSS Grid Layout
------------------------------------------------------- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  grid-gap: 20px;
}

.grid-container > div {
  border: 1px solid #ccc;
  padding: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Warning message if using old browser
that does not support CSS Grid Layout.
------------------------------------------------------- */
.warning {
  padding: 20px;
  margin-bottom: 30px;
  background: #f7b563;
  border: 1px solid #e88d1a;
  border-radius: 3px;
}

.warning a {
  color: #fff;
}

@supports (display: grid) {
  .warning {
    display: none;
  }
}

/* Example boxes
------------------------------------------------------- */
.box {
  display: inline-block;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-width: 35px;
  border-style: solid;
  border-color: cyan magenta yellow black;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.box1:hover,
.box1:focus {
  border-color: yellow black cyan magenta;
}

.box2 {
  width: 0;
}

.box2:hover,
.box2:focus {
  width: 100px;
}

.box3 {
  width: 0;
  height: 0;
}

.box3:hover,
.box3:focus {
  width: 100px;
  height: 100px;
}

@-webkit-keyframes rotate-borders {
  25% { border-color: black cyan magenta yellow; }
  50% { border-color: yellow black cyan magenta; }
  75% { border-color: magenta yellow black cyan; }
  100% { border-color: cyan magenta yellow black; }
}

@keyframes rotate-borders {
  25% { border-color: black cyan magenta yellow; }
  50% { border-color: yellow black cyan magenta; }
  75% { border-color: magenta yellow black cyan; }
  100% { border-color: cyan magenta yellow black; }
}

.box4 {
  -webkit-animation: rotate-borders 6s infinite;
          animation: rotate-borders 6s infinite;
}

.box5:hover,
.box5:focus {
  border-radius: 50%;
}

.box6:hover,
.box6:focus {
  width: 0;
  height: 0;
  border-width: 85px;
  border-color: transparent magenta yellow transparent;
}

.box7:hover,
.box7:focus {
  width: 0;
  height: 0;
  border-width: 0 170px 170px 0;
  border-color: transparent magenta yellow transparent;
}

.box8:hover,
.box8:focus {
  width: 0;
  height: 0;
  border-width: 85px;
  border-color: transparent magenta yellow black;
}

.box9:hover,
.box9:focus {
  width: 0;
  height: 0;
  border-width: 170px 85px 0 85px;
  border-color: cyan transparent transparent transparent;
}

.box10:hover,
.box10:focus {
  width: 0;
  height: 0;
  border-width: 85px 170px 85px 0;
  border-color: transparent magenta transparent transparent;
}

.box11:hover,
.box11:focus {
  width: 0;
  height: 0;
  border-width: 0 85px 170px 85px;
  border-color: transparent transparent yellow transparent;
}

.box12:hover,
.box12:focus {
  width: 0;
  height: 0;
  border-width: 85px 0 85px 170px;
  border-color: transparent transparent transparent black;
}

In the above CSS code, each .box class represents an example with its unique border animation effect. These effects trigger on hover or focus. The .box1, .box2, and so on, classes define individual animations. You can modify these to create your custom effects. Experiment with properties like border-width, border-color, and transitions to create variations.

That’s all! hopefully, you have successfully integrated CSS border animation examples into your project. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.