0

I have a div with a border that runs around all sides.

I want to transform from solid to dashed on hover. However I want to control the length on the dashes.

I understand that this may be possible with SCSS?

databot
  • 131
  • 3
  • 15
  • have you tried border-image:? – swapnil solanke Nov 11 '14 at 02:02
  • Why would you think Sass could control the length of the dashes? The only thing Sass can do is compile to CSS. – cimmanon Nov 11 '14 at 02:15
  • Also related: http://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots – cimmanon Nov 11 '14 at 02:17
  • Yeah I did, but the transition is terrible. – databot Nov 11 '14 at 02:59
  • I came across this so was wondering whether it would be possible to do it for all sides: http://thephuse.com/development/customizing-your-dashed-and-dotted-borders-in-css3/ – databot Nov 11 '14 at 03:01
  • There were no suitable answers in the older question linked for the tools available now. After a crash course in the `border-image` property, [I have provided an answer](http://stackoverflow.com/a/26858151/2930477) so you can roll your own border :) – misterManSam Nov 11 '14 at 05:37
  • @user2307186 - you could fade a border over the top on hover, [like in this example](http://jsbin.com/hepimu/2/edit) to give a smoother transition using opacity. – misterManSam Nov 11 '14 at 08:10
  • 1
    @misterManSam I was experimenting with this but couldn't quite get it to look how I wanted when it was applied to my box. I ended up resorting to using a background image and another div placed over the top that had the original line border for transition. They then work in parallel on hover creating as best transition as I want. – databot Nov 11 '14 at 15:05

0 Answers0