Today I went to shopTalkshow, a blog site, and it was very interesting to see this interface:

I think its style is very unique, especially some of the borders.

So let’s see what you can do with your borders using CSS.

Border properties

When we talk about borders, the first thing we think about is border, and the most common thing we use is solid, and we see in the picture above that there is a improvement in the shell.

In addition to the most common solid and err styles, CSS Border also supports none, Hidden, outline, double, Groove, Ridge, Inset, outset and so on. Remove None, hidden, and take a look at all natively supported border styles:

That’s the basics. If you want to implement a different style of border, or animate a border, you need some other attributes or imagination. OK, let’s take a look at some extra interesting borders.

Border length change

Let’s start with an easy one, and implement a border effect like this:

These are actually two pseudo-elements that borrow from the element. The two pseudo elements are only set on the left border, the bottom border, the right border, and the height and width of the two pseudo elements can be changed by hover. Very easy to understand.

div {
    position: relative;
    border: 1px solid #03A9F3;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }
    
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
    
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
    
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px); }}Copy the code

CodePen Demo — width border animation

Now, it starts to get a little harder.

Dotted border animation

Using the success keyword, you can easily create dashed borders.


div {
    border: 1px dashed # 333;
}
Copy the code

The goal, of course, is to make the border move. There is no way to use the success keyword. However, there are many ways to implement dashed lines in CSS, such as gradient is a good way:

div {
    background: linear-gradient(90deg.# 333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}
Copy the code

Take a look at the dashed line simulated using gradient as follows:

Ok, gradients support multiple gradients, so let’s use gradients for each of the four edges of the container:

div {
    background: 
        linear-gradient(90deg.# 333 50%, transparent 0) repeat-x,
        linear-gradient(90deg.# 333 50%, transparent 0) repeat-x,
        linear-gradient(0deg.# 333 50%, transparent 0) repeat-y,
        linear-gradient(0deg.# 333 50%, transparent 0) repeat-y;
    background-size: 4px 1px.4px 1px.1px 4px.1px 4px;
    background-position: 0 0.0 100%.0 0.100% 0;
}
Copy the code

The effect is as follows:

OK, at this point, our dashed border animation is more than half complete. Border-style: animation is not supported, but gradient is. We add a hover effect to the above div, add an animation when the hover, and change the background-position of the element.

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%.0 -4px.100% 4px; }}Copy the code

OK, look at the effect, hover up when the border can move up, because the whole animation is connected end to end, infinite loop animation looks like a dotted border has been in motion, this is a small smoke screen or small skills:

Here’s another little trick, if we want the dotted border animation to go from the other border, to the dotted border, to the moving animation. It is possible to simulate it entirely by gradient, but if you want to save some code, it is quicker to use border, like this:

div {
    border: 1px solid # 333;
    
    &:hover {
        border: none;
        background: 
            linear-gradient(90deg.# 333 50%, transparent 0) repeat-x,
            linear-gradient(90deg.# 333 50%, transparent 0) repeat-x,
            linear-gradient(0deg.# 333 50%, transparent 0) repeat-y,
            linear-gradient(0deg.# 333 50%, transparent 0) repeat-y;
        background-size: 4px 1px.4px 1px.1px 4px.1px 4px;
        background-position: 0 0.0 100%.0 0.100% 0; }}Copy the code

Due to the difference in the position of border and background on the box model, there will be a significant visual dislocation:

To solve this problem, we can replace the border with an outline, because the outline can be set to an outline-offset. To solve the problem perfectly:

div {
    outline: 1px solid # 333;
    outline-offset: -1px;
    
    &:hover {
        outline: none; }}Copy the code

Finally, take a look at the effect applied to the actual button:

The complete code for the Demo is as follows:

CodePen Demo — dashed border animation

In fact, due to the special relationship between the background and the border, when using the border, it can also be solved by modifying the background-position, which is more winding. For more information on the background and border fill relationship, see this article: Multiple implementations of striped Borders

Other uses of gradients

With gradients, you can do more than that.

Let’s dig deeper into the gradient and use it to create a background like this:

div {
    position: relative;

    &::after {
        content: ' ';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%.50% 50%;
        background-position: 0 0.100% 0.100% 100%.0 100%;
        background-image: linear-gradient(# 399953.# 399953), linear-gradient(#fbb300.#fbb300), linear-gradient(#d53e33.#d53e33), linear-gradient(#377af5.#377af5); }}Copy the code

Note that this graph is generated by the pseudo-element of the element, and is 200% of the width and height of the parent element, beyond overflow: hidden.

Next, add rotation to it:

div {
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(1turn); }}Copy the code

Look at the effect:

Finally, use a pseudo element to mask the middle, and a Nice border animation is produced (the animation will appear translucent elements, easy to understand the principle) :

Here’s the full code for the Demo, which I first saw by this author, Jesse B

CodePen Demo — gradient border animation

Change the color of the gradient

With the above basic techniques in hand, we can make some changes to the color of the gradient. We will change the 4 colors to 1 color:

div::after {
    content: ' ';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(# 399953.# 399953);
}
Copy the code

You get a figure like this:

Again, let it rotate together and a monochrome chasing frame animation comes out:

CodePen Demo — gradient border animation 2

Wow, very nice look. However, if it is a single line, there is an obvious defect, the end of the border is a small triangle instead of vertical, which may not be applicable to some scenarios or PM can not accept.

Is there any way to get rid of these little triangles? Yes, in the following article we will introduce another method, using clip-path, to eliminate these small triangles.

conic-gradientThe use of

Before we move on to clip-path, let’s talk about angular tween.

The linear gradient is mainly used above. The exact same effect can be achieved using conic-gradient.

Let’s try this again with conic-gradient, this time in a darker style. The core code is as follows:

.conic {
	position: relative;
	
	&::before {
		content: ' ';
		position: absolute;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background: conic-gradient(transparent, rgba(168.239.255.1), transparent 30%);
		animation: rotate 4slinear infinite; }}@keyframes rotate {
	100% {
		transform: rotate(1turn); }}Copy the code

The effect diagram and schematic diagram are as follows: rotate a part of the angular gradient graph, use another pseudo element to mask the middle part, and only the part of the line can be leaked out:

CodePen Demo — Rotating border 3

clip-pathThe use of

Another old friend, Clip-Path, never absent from interesting things.

Clip-path itself can be animated from one clipping shape to another.

Using this feature, we can subtly achieve such a border following effect. The pseudocode is as follows:

div {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3sinfinite linear; }}@keyframes clippath {
    0%.100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%); }}Copy the code

Effect drawing together with schematic drawing:

CodePen – clip-path border animation

In this case, since the elements will be clipped, we can use the pseudo elements as the background to clipping and animation, using the advantages of clip-path, the border will not produce small triangles. Meanwhile, this method also supports rounded border-RADIUS.

If we use another pseudo-element to actually implement a button style, we can get something like this:

CodePen – clip-path border animation 2

overflowThe use of

The following technique is implemented using Overflow. Implement a border animation like this:

Why use Overflow implementation?

Here’s a schematic:

CodePen Demo — Cleverly use Overflow and Transform to hover effect

Two core points:

  1. We useoverflow: hiddenTo hide an entire element that would otherwise be outside the container
  2. By using thetransform-originControls the rotation center of the element

Notice that most of the interesting CSS effects are made using similar techniques:

Simply put, the animation we see is only a small part of the original phenomenon. Through specific cropping, transparency changes, masks, etc., we finally see only a part of the original phenomenon.

border-imageThe use of

With the border-image, we can also do some interesting border animations. There is a very good article on the correct use of a border-image, but this article does not go too far into the basic definition.

If we have a picture like this:

By using the features of border-image-slice and border-image-repeat, similar border patterns can be obtained:

div {
  width: 200px;
  height: 120px;
  border: 24px solid;
  border-image: url(image-url);
  border-image-slice: 32;
  border-image-repeat: round;
}
Copy the code

On top of this, you can change the height and width of the element so that it can be extended to any container border of any size:

CodePen Demo — border-image Demo

Then, in this article, How to Animate a SVG with Border-Image, we’ll show you How to Animate a SVG with border-image.

Unlike the example above, all we need to do is make our image move, that is, we need a background image like this:

So, we also get a moving border, with exactly the same code, but the border is moving:

CodePen Demo — Dancing Skull Border

border-imageUsing the gradient

In addition to the map reference URL, the border-image can also be filled directly with color or gradient.

There was also a previous article on border-image — a clever implementation of gradient borders with rounded corners

We can use border-image + filter + clip-path to achieve the rounded border of the gradient:

.border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg); }}Copy the code

CodePen Demo — Clip-path, border-image and filter to achieve rounded gradient border

The last

This article introduces some border-animation tips that I think are interesting, but of course there are a lot of interesting effects in CSS production, which are limited to the length of the article.

The end of this article, hope to help you :), want to Get the most interesting CSS information, do not miss my public number – iCSS front-end anecdotes

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.