{"id":14117,"date":"2011-09-06T18:44:57","date_gmt":"2011-09-07T01:44:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14117"},"modified":"2021-08-02T11:13:45","modified_gmt":"2021-08-02T18:13:45","slug":"text-stroke","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","title":{"rendered":"text-stroke"},"content":{"rendered":"\n<p><code>text-stroke<\/code> 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 <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> or <abbr title=\"Web Hypertext Application Technology Working Group\">WHATWG<\/abbr> specification. As of June 2013, it is only implemented behind a <code>-webkit<\/code> vendor prefix, though future versions of Firefox and Internet Explorer may support the property (likely under their own prefixes).<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mark {\n  text-stroke: 2px red;\n}<\/code><\/pre>\n\n\n\n<p>The <code>text-stroke<\/code> property is actually shorthand for two other properties:<\/p>\n\n\n\n<ol><li><code>text-stroke-width<\/code>, which takes unit value (1px, 0.125em, 4in, etcetera) and describes the thickness of the stroke effect.<\/li><li><code>text-stroke-color<\/code>, which takes a color value (hex, rgb\/rgba, hsl\/hsla, etcetera).<\/li><\/ol>\n\n\n\n<p><code>text-stroke<\/code> also has a companion property, <code>text-fill-color<\/code>, which will override the <code>color<\/code> property, allowing for a graceful fallback to a different text color in browsers that do not support <code>text-stroke<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_CBLnG\" src=\"\/\/codepen.io\/anon\/embed\/CBLnG?height=350&amp;theme-id=1&amp;slug-hash=CBLnG&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed CBLnG\" title=\"CodePen Embed CBLnG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"points-of-interest\">Points of interest<\/h3>\n\n\n<ul><li>The stroke drawn by <code>text-stroke<\/code> is aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful.<\/li><li>in Webkit, <code>text-stroke<\/code> is animatable with CSS Transitions and Animations \u2013 but only the stroke color, not the stroke width.<\/li><li>A more browser-compatible (and arguably robust) stand-in for the <code>text-stroke<\/code> effect is using <code>text-shadow<\/code>, which is outlined in <a href=\"https:\/\/css-tricks.com\/adding-stroke-to-web-text\/\">this CSS-Tricks article<\/a>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=text-stroke\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">49*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">15*<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123*<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124*<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">4.0-4.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.webkit.org\/blog\/85\/introducing-text-stroke\/\" rel=\"noopener\">Surfin\u2019 Safari: Introducing Text-Stroke<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/adding-stroke-to-web-text\/\">Adding Stroke to Web Text<\/a><\/li><li><a href=\"http:\/\/www.westciv.com\/tools\/textStroke\/\" rel=\"noopener\">Live Editor<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 Firefox and Internet Explorer may [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","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":321460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/paint-order\/","url_meta":{"origin":14117,"position":0},"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":[]},{"id":236645,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/","url_meta":{"origin":14117,"position":1},"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":236664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/","url_meta":{"origin":14117,"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":236642,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/","url_meta":{"origin":14117,"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":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":14117,"position":4},"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":14117,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14117"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14117"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14117\/revisions"}],"predecessor-version":[{"id":345854,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14117\/revisions\/345854"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14117"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}