{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-border-style/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ea5f69ae-1e7f-5298-9edd-933873cc8427","title":"Tailwind CSS Border Style","slug":"/classes/tailwind-border-style/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"13 May 2024\",\n  \"title\": \"Tailwind CSS Border Style\",\n  \"metaTitle\": \"Tailwind border style\",\n  \"metaDescription\": \"The tailwind border style utility .\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-border-style\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Border Style\"), mdx(\"p\", null, \"In Tailwind CSS, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-style\"), \" property is used to define the style of the border around an element. There are several styles available, including \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"solid\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dashed\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dotted\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"double\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"none\"), \".\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-solid\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-style: solid;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-dashed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-style: dashed;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-dotted\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-style: dotted;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-double\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-style: double;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-style: none;\")))), mdx(\"h2\", null, \"Applying Tailwind Border Style\"), mdx(\"p\", null, \"In Tailwind CSS, you can apply a border style to an element using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-{style}\"), \" utility, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{style}\"), \" is the border style.\\nFor example, to apply a solid border, you would use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-solid\"), \" class as shown below:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"border border-solid\\\">This div has a solid border.</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"border-solid h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold flex justify-center items-center\"\n  }, \"This div has a solid border\")), mdx(\"p\", null, \"For example, to give a div a dashed border:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"border border-dashed\\\">This div has a dashed border.</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"border-dashed h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold flex justify-center items-center\"\n  }, \"This div has a dashed border\")), mdx(\"p\", null, \"For example, to give a div a dotted border:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"border border-dotted\\\">This div has a dotted border.</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"border-dotted h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold flex justify-center items-center\"\n  }, \"This div has a dotted border\")), mdx(\"p\", null, \"For example, to give a div a double border:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"border border-double\\\">This div has a double border.</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"border-double h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold flex justify-center items-center\"\n  }, \"This div has a double border\")), mdx(\"p\", null, \"For example, to give a div a none border:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"border border-none\\\">This div has a none border.</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-gradient-to-r from-indigo-50 to-indigo-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"border-none h-16 flex-1 rounded-md border-4 border-indigo-500 border-opacity-100 font-extrabold flex justify-center items-center\"\n  }, \"This div has a none border\")), mdx(\"h2\", null, \"Customizing Tailwind Border Styles\"), mdx(\"p\", null, \"Tailwind CSS allows you to customize border styles using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" file. You can extend the default configuration and define your own custom border styles.\"), mdx(\"p\", null, \"Here's an example of how to add a new border style:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// tailwind.config.js\\n  module.exports = {\\n    variants: {\\n      extend: {\\n        // ...\\n       borderStyle: ['hover', 'focus'],\\n      }\\n    }\\n  }\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"border border-hover\\\">This div has a hover border.</div>\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-border-style","title":"Tailwind Border Style","items":[{"url":"#applying-tailwind-border-style","title":"Applying Tailwind Border Style"},{"url":"#preview","title":"Preview"},{"url":"#preview-1","title":"Preview"},{"url":"#preview-2","title":"Preview"},{"url":"#preview-3","title":"Preview"},{"url":"#preview-4","title":"Preview"},{"url":"#customizing-tailwind-border-styles","title":"Customizing Tailwind Border Styles"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-border-style.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind border style","lastUpdated":"13 May 2024","metaDescription":"The tailwind border style utility ."}}},"pageContext":{"id":"ea5f69ae-1e7f-5298-9edd-933873cc8427"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}