Title: CSS Hover Animated Dash Border Help Last modified: September 10, 2020 --- # CSS Hover Animated Dash Border Help * Resolved [hifumi](https://wordpress.org/support/users/hifumi/) * (@hifumi) * [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/) * I’m trying to get a gradient dashed border where the dash border fades in whiles moving around the side of the border and when not hovering, it fades out. * I don’t know why the animation does not work either, nor will the dashed border change color to gradient. It does change color if it’s one specific color. * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-hover-animated-dash-border-help%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 5 replies - 1 through 5 (of 5 total) * [George Appiah](https://wordpress.org/support/users/gappiah/) * (@gappiah) * [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/#post-13385886) * First, this is not really a WordPress support question. You may get faster and better help from general programming forums like StackOverflow, or better yet, a beginner-friendly coding community like [https://dev.to](https://dev.to) * I’m not a CSS a guru, but let me give this a shot. You have this comment in your pen: * > /*When hovered, the text shifts position but it should not do that nor does > the border color change to gradient*/ * The text shifts position because you have a padding of 2em. Of course, the text will have to shift around to make space for this padding (and even for the border). * And as to why your gradient isn’t working, I put your code into W3’s CSS validator, and it throws a “NOT BORDER COLOR” validation error: [https://jigsaw.w3.org/css-validator/validator](https://jigsaw.w3.org/css-validator/validator) * From [MDN’s documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient): * > The linear-gradient() CSS function creates an image consisting of a progressive > transition between two or more colors along a straight line. Its result is > an object of the data type, which is a special kind of . * So that would explain why `linear-gradient` cannot be used as a `border-color`— and why your code isn’t working at all. You’d have to use `border-image` which doesn’t work in all browsers, or play with `background-image` to have your `linear- gradient` to work. * As to the actual transition effect you’re trying to create, that is way over my head: I didn’t even think you could do it in pure CSS, but after looking at some cool CSS-only animations and transition effects online now, you probably can. * [Niall Madhoo](https://wordpress.org/support/users/nm1com/) * (@nm1com) * [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/#post-13386003) * Hello [@hifumi](https://wordpress.org/support/users/hifumi/), * The effect you’re trying to achieve is rather complex. As [@gappiah](https://wordpress.org/support/users/gappiah/) mentioned, you’re better of asking for help on somewhere like [StackOverflow](https://stackoverflow.com/) or [DEV.to](https://dev.to/). Linear gradients won’t work with dashed borders, for instance. * Please see the following for how to **create gradient borders**: * [https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css](https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css) [https://css-tricks.com/gradient-borders-in-css/](https://css-tricks.com/gradient-borders-in-css/) * And for **animating the borders**, you can see: * [https://codepen.io/giana/pen/yYBpVY/](https://codepen.io/giana/pen/yYBpVY/) * Thread Starter [hifumi](https://wordpress.org/support/users/hifumi/) * (@hifumi) * [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/#post-13386294) * Thank you, I’ll try building it bit by bit starting with the borders showing up > adding hover effect > adding gradient color > etc. and see where it goes. If successful, I’ll update the codepen for future reference. * I thought it would be possible because I’ve seen this: * [https://codepen.io/simeydotme/pen/rVqrrN](https://codepen.io/simeydotme/pen/rVqrrN) * [George Appiah](https://wordpress.org/support/users/gappiah/) * (@gappiah) * [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/#post-13386417) * > I thought it would be possible because I’ve seen this: > [https://codepen.io/simeydotme/pen/rVqrrN](https://codepen.io/simeydotme/pen/rVqrrN) * This pen is using the `background` shortcut, where you are using `background- color` specifically. Plus, this pen has a lot more stuff that yours doesn’t have. * [Niall Madhoo](https://wordpress.org/support/users/nm1com/) * (@nm1com) * [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/#post-13389616) * You’re welcome. It’s not possible using CSS `border` styling but there are ways around it like using the `background` element. This article explains how to do that: [https://css-tricks.com/gradient-borders-in-css/](https://css-tricks.com/gradient-borders-in-css/) Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘CSS Hover Animated Dash Border Help’ is closed to new replies. ## Tags * [border](https://wordpress.org/support/topic-tag/border/) * [Borders](https://wordpress.org/support/topic-tag/borders/) * [css](https://wordpress.org/support/topic-tag/css/) * [html](https://wordpress.org/support/topic-tag/html/) * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/) * 5 replies * 3 participants * Last reply from: [Niall Madhoo](https://wordpress.org/support/users/nm1com/) * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/css-hover-animated-dash-border-help/#post-13389616) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics