{"id":236637,"date":"2016-01-12T12:55:47","date_gmt":"2016-01-12T19:55:47","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=236637"},"modified":"2018-05-10T14:54:42","modified_gmt":"2018-05-10T21:54:42","slug":"stroke-width","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/","title":{"rendered":"stroke-width"},"content":{"rendered":"<p>The <code>stroke-width<\/code> property in CSS is for setting the width of a border on SVG shapes. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  stroke-width: 2;\r\n}<\/code><\/pre>\n<p>Remember:<\/p>\n<ul>\n<li>This <strong>will<\/strong> override a presentation attribute <code>&lt;path stroke-width=\"2\" ... \/&gt;<\/code><\/li>\n<li>This <strong>will not<\/strong> override an inline style e.g. <code>&lt;path style=\"stroke-width: 2;\" ... \/&gt;<\/code><\/li>\n<\/ul>\n<h3>Values<\/h3>\n<p>The <code>stroke-width<\/code> property can accept any number, including whole numbers, decimals, and percentages:<\/p>\n<ul>\n<li><code>stroke-width: 2px<\/code><\/li>\n<li><code>stroke-width: 2em<\/code><\/li>\n<li><code>stroke-width: 2<\/code><\/li>\n<li><code>stroke-width: 2.5<\/code><\/li>\n<li><code>stroke-width: 15%<\/code><\/li>\n<\/ul>\n<p>Note that a unit identifier (i.e. <code>px<\/code> and <code>em<\/code>) are not required. A number without units is a value based on the coordinate system of the SVG <code>viewBox<\/code>. So, for example, <code>5<\/code> renders the same as <code>5%<\/code> in a <code>viewBox<\/code> that is set to <code>0 0 100 100<\/code> (5\/100 = .05 or 5%) but <code>10%<\/code> in one that&#8217;s <code>0 0 50 50<\/code> (5\/50 = .1 or 10%).<\/p>\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=\"xZrXGz\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/xZrXGz\/\" rel=\"noopener\">stroke-width 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\/s\/stroke\/\"><code>stroke<\/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<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/SVG11\/painting.html#StrokeWidthProperty\" 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-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 &lt;path stroke-width=&#8221;2&#8243; &#8230; \/&gt; This will not override an inline style e.g. &lt;path style=&#8221;stroke-width: 2;&#8221; &#8230; \/&gt; Values The stroke-width property can accept any number, including whole [&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":236642,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/","url_meta":{"origin":236637,"position":0},"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":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":236637,"position":1},"title":"stroke","date":"January 12, 2016","format":false,"excerpt":"The stroke property in CSS is for adding a border to SVG shapes. .module { stroke: black; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke property can accept any CSS color value. Named colors \u2014 orange Hex colors \u2014\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":236637,"position":2},"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":[]},{"id":14117,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","url_meta":{"origin":236637,"position":3},"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":288473,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linejoin\/","url_meta":{"origin":236637,"position":4},"title":"stroke-linejoin","date":"May 29, 2019","format":false,"excerpt":"stroke-linejoin is a CSS property that defines how SVG paths should appear at the point where two lines are joined together. stroke-linejoin can be used to sharpen or soften the joints on connecting lines in an SVG. stroke-linejoin is also an SVG attribute which can be overwritten using CSS. stroke-linejoin:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/paint-order\/","url_meta":{"origin":236637,"position":5},"title":"paint-order","date":"September 18, 2020","format":false,"excerpt":"The CSS paint-order property sets the order that SVG shapes and text are drawn, including the fill, stroke, and any markers that might be in use. By default, those attributes are drawn in that very order: fill, stroke, and markers. This property allows us to switch it up so we\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\/236637"}],"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=236637"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236637\/revisions"}],"predecessor-version":[{"id":270914,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236637\/revisions\/270914"}],"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=236637"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=236637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}