Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way.<\/p>\n
View Demo<\/a> Download Files<\/a><\/p>\n Links from Video:<\/strong><\/p>\n Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way. View Demo Download Files Links from Video: SnapBird (finding old tweets) CSS3Please<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":260232,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-repeating-gradients\/","url_meta":{"origin":8928,"position":0},"title":"CSS Repeating Gradients","date":"May 21, 2017","format":false,"excerpt":"Repeating gradients take a trick we can already do with the creative use of color-stops on the linear-gradient() and radial-gradient() notations, and bakes it in for us. The idea is that we can create patterns out of the gradients we create and allow them to repeat infinitely. Comparing a linear\u2026","rel":"","context":"In \"gradients\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/repeating-linear-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196143,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/","url_meta":{"origin":8928,"position":1},"title":"background-image","date":"February 17, 2015","format":false,"excerpt":"The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element. There are two different types of images you can include with CSS: regular images and gradients. Images Using an image on a background is pretty simple: body {\u2026","rel":"","context":"With 17 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2402,"url":"https:\/\/css-tricks.com\/video-screencasts\/57-using-css3\/","url_meta":{"origin":8928,"position":2},"title":"#57: Using CSS3","date":"March 18, 2009","format":false,"excerpt":"The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations\/transitions, text-shadow, box-shadow, multiple\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321696,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/","url_meta":{"origin":8928,"position":3},"title":"mask-size","date":"September 23, 2020","format":false,"excerpt":"In CSS, the mask-size property specifies the size of a mask layer image. In many ways, it works very much like the background-size property. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-size: 200px 100px; } Masking allows you to display selected parts of an element while hiding the rest. The size\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21728,"url":"https:\/\/css-tricks.com\/video-screencasts\/126-using-modernizr\/","url_meta":{"origin":8928,"position":4},"title":"#126: Using Modernizr","date":"May 23, 2013","format":false,"excerpt":"Should Modernizr be part of every modern web project? Not necessarily. In this screencast I talk about how you need Modernizr when you plan to do something specifically different depending on its browser support determination. Load scripts to support a feature when the browser lacks native support? Perfect. Test if\u2026","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7069,"url":"https:\/\/css-tricks.com\/snippets\/css\/multiple-backgrounds-syntax\/","url_meta":{"origin":8928,"position":5},"title":"Multiple Backgrounds Syntax","date":"August 12, 2010","format":false,"excerpt":"Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this: #box { background: url(icon.png) top left no-repeat, url(texture.jpg), url(top-edge.png) top left repeat-y; } They are comma separated values and there can be as many as you want with different URL's, positioning, and\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8928"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8928"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8928\/revisions"}],"predecessor-version":[{"id":8950,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8928\/revisions\/8950"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8928"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n