{"id":236642,"date":"2016-01-12T12:56:04","date_gmt":"2016-01-12T19:56:04","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=236642"},"modified":"2016-01-12T12:56:04","modified_gmt":"2016-01-12T19:56:04","slug":"stroke-linecap","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/","title":{"rendered":"stroke-linecap"},"content":{"rendered":"<p>The <code>stroke-linecap<\/code> property in CSS is for setting the starting and ending points of a border on SVG shapes.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  stroke-linecap: round;\r\n}<\/code><\/pre>\n<p>Remember:<\/p>\n<ul>\n<li>This <strong>will<\/strong> override a presentation attribute <code>&lt;path stroke-linecap=\"square\" ... \/&gt;<\/code><\/li>\n<li>This <strong>will not<\/strong> override an inline style e.g. <code>&lt;path style=\"stroke-linecap: square;\" ... \/&gt;<\/code><\/li>\n<\/ul>\n<h3>Values<\/h3>\n<p>The <code>stroke-linecap<\/code> property can accept the following values:<\/p>\n<ul>\n<li><code>butt<\/code> (default): ends the stroke with a sharp 90-degree angle<\/li>\n<li><code>square<\/code>: similar to <code>butt<\/code> except that it extends the stroke beyond the length of the path<\/li>\n<li><code>round<\/code>: adds a radius that smooths out the start and end points, which is controlled by the <code>stroke-width<\/code><\/li>\n<\/ul>\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=\"GoEMZK\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/GoEMZK\/\" rel=\"noopener\">stroke-linecap 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-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\/SVG11\/painting.html#StrokeLinecapProperty\" 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-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 &lt;path stroke-linecap=&#8221;square&#8221; &#8230; \/&gt; This will not override an inline style e.g. &lt;path style=&#8221;stroke-linecap: square;&#8221; &#8230; \/&gt; Values The stroke-linecap property can accept the [&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":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":236642,"position":0},"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":236637,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/","url_meta":{"origin":236642,"position":1},"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":236642,"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":288473,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linejoin\/","url_meta":{"origin":236642,"position":3},"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":236645,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/","url_meta":{"origin":236642,"position":4},"title":"stroke-dasharray","date":"January 18, 2016","format":false,"excerpt":"The stroke-dasharray property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating dashes and the gaps between them. path { stroke-dasharray: 5; \/* dashes and gaps are both 5 units long *\/ } It's a\u2026","rel":"","context":"In \"stroke\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14117,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","url_meta":{"origin":236642,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236642"}],"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=236642"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236642\/revisions"}],"predecessor-version":[{"id":236689,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236642\/revisions\/236689"}],"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=236642"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=236642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}