{"id":236635,"date":"2016-01-12T12:55:24","date_gmt":"2016-01-12T19:55:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=236635"},"modified":"2016-01-22T17:45:37","modified_gmt":"2016-01-23T00:45:37","slug":"stroke","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","title":{"rendered":"stroke"},"content":{"rendered":"<p>The <code>stroke<\/code> property in CSS is for adding a border to SVG shapes. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  stroke: black;\r\n}<\/code><\/pre>\n<p>Remember:<\/p>\n<ul>\n<li>This <strong>will<\/strong> override a presentation attribute <code>&lt;path stroke=\"#fff\" ... \/&gt;<\/code><\/li>\n<li>This <strong>will not<\/strong> override an inline style e.g. <code>&lt;path style=\"stroke: #fff;\" ... \/&gt;<\/code><\/li>\n<\/ul>\n<h3>Values<\/h3>\n<p>The <code>stroke<\/code> property can accept any CSS color value.<\/p>\n<ul>\n<li>Named colors \u2014 <code>orange<\/code><\/li>\n<li>Hex colors \u2014 <code>#FF9E2C<\/code><\/li>\n<li>RGB and RGBa colors \u2014 <code>rgb(255, 158, 44) and rgba(255, 158, 44, .5)<\/code><\/li>\n<li>HSL and HSLa colors \u2014 <code>hsl(32, 100%, 59%) and hsla(32, 100%, 59%, .5)<\/code><\/li>\n<\/ul>\n<p>Awesomely enough, <code>stroke<\/code> also accepts the patterns of SVG shapes that are defined inside of a <code>defs<\/code> element:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n\tstroke: url(#pattern);\r\n}<\/code><\/pre>\n<p data-height=\"200\" style=\"height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"XXgerz\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/XXgerz\/\" rel=\"noopener\">stroke property<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/fill\/\"><code>fill<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/\"><code>stroke-dasharray<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/\"><code>stroke-dashoffset<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/\"><code>stroke-linecap<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/\"><code>stroke-width<\/code><\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/SVG\/painting.html#StrokeProperties\" rel=\"noopener\">SVG 1.1 Spec<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorial\/Fills_and_Strokes\" rel=\"noopener\">MDN on fills and strokes<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Safari\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Opera\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"IE\" class=\"yep\">9+<\/td>\n<td data-browser-name=\"Android\" class=\"yep\">4.4+<\/td>\n<td data-browser-name=\"iOS\" class=\"yep\">Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The stroke property in CSS is for adding a border to SVG shapes. .module { stroke: black; } Remember: This will override a presentation attribute &lt;path stroke=&#8221;#fff&#8221; &#8230; \/&gt; This will not override an inline style e.g. &lt;path style=&#8221;stroke: #fff;&#8221; &#8230; \/&gt; Values The stroke property can accept any CSS color value. Named colors \u2014 [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-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":236513,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/fill\/","url_meta":{"origin":236635,"position":0},"title":"fill","date":"January 7, 2016","format":false,"excerpt":"The fill property in CSS is for filling in the color of a SVG shape. .eyeball { fill: red; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The fill property can accept any CSS color value. Named colors \u2014 orange Hex\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14029,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/","url_meta":{"origin":236635,"position":1},"title":"color","date":"September 5, 2011","format":false,"excerpt":"The color property in CSS sets the color of text and text decorations. p { color: blue; } Values The color property can accept any CSS color value. Named colors: for example, \"aqua\". Hex colors: for example, #00FFFF or #0FF. RGB and RGBa colors: for example, rgb(0, 255, 255) and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14117,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","url_meta":{"origin":236635,"position":2},"title":"text-stroke","date":"September 6, 2011","format":false,"excerpt":"text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification. As of June 2013, it is only implemented behind a -webkit vendor prefix, though future versions of\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236642,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/","url_meta":{"origin":236635,"position":3},"title":"stroke-linecap","date":"January 12, 2016","format":false,"excerpt":"The stroke-linecap property in CSS is for setting the starting and ending points of a border on SVG shapes. .module { stroke-linecap: round; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke-linecap property can accept the following values: butt (default):\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236637,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/","url_meta":{"origin":236635,"position":4},"title":"stroke-width","date":"January 12, 2016","format":false,"excerpt":"The stroke-width property in CSS is for setting the width of a border on SVG shapes. .module { stroke-width: 2; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke-width property can accept any number, including whole numbers, decimals, and percentages:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/","url_meta":{"origin":236635,"position":5},"title":"stroke-dashoffset","date":"January 12, 2016","format":false,"excerpt":"The stroke-dashoffset property in CSS defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin. .module { stroke-dashoffset: 100; } Remember: This will override a presentation attribute This will not override an\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236635"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=236635"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236635\/revisions"}],"predecessor-version":[{"id":237183,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236635\/revisions\/237183"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=236635"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=236635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}