{"id":25120,"date":"2018-11-26T21:14:58","date_gmt":"2018-11-26T13:14:58","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25120"},"modified":"2018-11-26T20:12:38","modified_gmt":"2018-11-26T12:12:38","slug":"css-animated-dashed-border","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/","title":{"rendered":"How to Animate Dashed Border with CSS"},"content":{"rendered":"<p>Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like <a href=\"https:\/\/www.hongkiat.com\/blog\/css-gradient-border\/\">CSS-gradient borders<\/a>, <a href=\"https:\/\/tympanus.net\/Tutorials\/BorderAnimationSVG\/\">SVG borders<\/a>, <a href=\"https:\/\/css-tricks.com\/snippets\/css\/multiple-borders\/\">multiple borders<\/a> and more to mimic and upgrade the looks of box borders and its animations.<\/p>\n<p>Today we\u2019ll look into a simpler  hack for dashed borders: dashed border animation. The animated dashed border will be created using only <code>outline<\/code> and <code>box-shadow<\/code>, leaving no fuss about fallbacks, since <code>outline<\/code> is supported from IE8 onwards. That way the user will still be able to see the borders unlike when SVG or gradient is used. With this you can also create bicolored dashes. Let\u2019s take a look.<\/p>\n<h2>Creating The Borders<\/h2>\n<p>We will first create the borders. For this, we\u2019ll use a dashed outline and a box shadow.<\/p>\n<pre>\r\n.banners{\r\n    outline: 6px dashed yellow;\r\n    box-shadow: 0 0 0 6px #EA3556;\r\n    ...\r\n }\r\n<\/pre>\n<p><iframe height=\"177\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/rOjBVY\/?height=177&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/rOjBVY\/\" rel=\"nofollow\">CSS border \u2013 outline & box shadow<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p>The <code>outline<\/code> will need all of its values; width, type and color. The <code>box-shadow<\/code> only needs the value for <em>spread<\/em> which should be the same as the outline\u2019s width and its color.  Both the outline and the box-shadow together will create the effect of two-colored dashes.<\/p>\n<p>You can then adjust the box\u2019s width or height for your desired border look at the corners.<\/p>\n<h2>Animating The Borders<\/h2>\n<p>For our first animation example, we\u2019ll add CSS keyframe animations to a set of banners with the borders animating continuosly, gaining attention. For the animation effect we\u2019ll simply swap the colors of the outline and box shadow.<\/p>\n<pre>@keyframes animateBorder {\r\n  to {\r\n    outline-color: #EA3556;\r\n    box-shadow: 0 0 0 6px yellow;\r\n  }\r\n}<\/pre>\n<p>You can target the color of the outline using <code>outline-color<\/code> longhand property, however for box shadow you\u2019ll have to give all the values to the shorthand property for now.<\/p>\n<p class=\"note\"><strong>Read more:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css-shorthand-longhand-notations\/\">CSS Shorthand vs. Longhand \u2013 When to Use Which<\/a><\/p>\n<p>Once the animation is ready, add it to the box.<\/p>\n<pre>.banners{\r\n    outline: 6px dashed yellow;\r\n    box-shadow: 0 0 0 6px #EA3556;\r\n    animation: 1s animateBorder infinite;\r\n    ...\r\n}<\/pre>\n<p><iframe height=\"538\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/yYVmze\/?height=538&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/yYVmze\/\" rel=\"nofollow\">CSS Dashed border animation<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h2>Transitions On The Borders<\/h2>\n<p>For the transition example we\u2019ll add borders to pictures and animate those on hover. You can also change the border size for different effects.<\/p>\n<pre>.photos{\r\n    outline: 20px dashed #006DB5;\r\n    box-shadow: 0px 0px 0px 20px #3CFDD3;\r\n    transition: all 1s;\r\n    ...\r\n}\r\n\r\n.photos:hover{\r\n    outline-color: #3CFDD3;\r\n    box-shadow: 0 0 0 20px #006DB5;\r\n}<\/pre>\n<p>Now, hover over these images to see your CSS dashed borders in all its animated glory.<\/p>\n<p><iframe height=\"1680\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/dYOxJe\/?height=1680&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/dYOxJe\/\" rel=\"nofollow\">CSS dashed border transition<\/a> by Preethi (<a href=\"https:\/\/codepen.io\/\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>.<\/iframe><\/p>\n<p>And, that\u2019s a wrap. You can try replacing dashed borders with dotted ones, but the effect might not be asas good. You can also change the outline type during animation for a few more effects.<\/p>","protected":false},"excerpt":{"rendered":"<p>Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like CSS-gradient borders, SVG borders, multiple borders and more to mimic and upgrade the looks of box borders and its animations. Today we\u2019ll look into a simpler hack for dashed borders:&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,3498,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Animate Dashed Border with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Animate Dashed Border with CSS\" \/>\n<meta property=\"og:description\" content=\"Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-26T13:14:58+00:00\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Animate Dashed Border with CSS\",\"datePublished\":\"2018-11-26T13:14:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/\"},\"wordCount\":414,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Animation\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/\",\"name\":\"How to Animate Dashed Border with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2018-11-26T13:14:58+00:00\",\"description\":\"Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-dashed-border\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Animate Dashed Border with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Animate Dashed Border with CSS - Hongkiat","description":"Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/","og_locale":"en_US","og_type":"article","og_title":"How to Animate Dashed Border with CSS","og_description":"Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like","og_url":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-11-26T13:14:58+00:00","author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Animate Dashed Border with CSS","datePublished":"2018-11-26T13:14:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/"},"wordCount":414,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Animation","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/","url":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/","name":"How to Animate Dashed Border with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2018-11-26T13:14:58+00:00","description":"Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-dashed-border\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Animate Dashed Border with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6xa","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25120"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25120\/revisions"}],"predecessor-version":[{"id":46127,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25120\/revisions\/46127"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25120"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}