{"id":7299,"date":"2024-01-11T17:48:00","date_gmt":"2024-01-11T17:48:00","guid":{"rendered":"https:\/\/codehim.com\/?p=7299"},"modified":"2024-01-22T15:49:59","modified_gmt":"2024-01-22T10:49:59","slug":"css-border-corners-only-hover","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/","title":{"rendered":"CSS Border Corners only Hover"},"content":{"rendered":"<p>This simple CSS code snippet helps you to draw corners only border of an HTML element on hover event. It uses <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/conic-gradient#:~:text=A%20conic%20gradient%20is%20specified,are%20specified%20with%20an%20angle.\" target=\"_blank\" rel=\"noopener\">CSS conic-gradient<\/a> function for the background-image property to set the corner border of an object. The object maybe an image, text, iframe, or any other HTML element.<\/p>\n<h2>How to Create CSS Border Corners only on Hover<\/h2>\n<p>1. In order to create corners only border, create an HTML element that you want to apply a border to. Here we are placing two images, you can place any element you want.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;img src=\"https:\/\/picsum.photos\/id\/133\/200\/200\" alt=\"two old cars in front of a garage\"&gt;\r\n&lt;img src=\"https:\/\/picsum.photos\/id\/183\/200\/200\" alt=\"a very old volkswagen van\" class=\"alt\" style=\"--g: 20px;--b:5px;--s: 80px;--c:#6A4A3C;\"&gt;\r\n<\/pre>\n<p>2. Style the corners border using the following CSS. If you want to apply this corner style border to your own element, use the class name of that element instead of img selector.<\/p>\n<pre class=\"prettyprint linenums lang-css\">img {\r\n  --b: 8px;  \/* border thickness*\/\r\n  --s: 60px; \/* size of the corner*\/\r\n  --g: 14px; \/* the gap*\/\r\n  --c: #EDC951; \r\n  \r\n  padding: calc(var(--b) + var(--g));\r\n  background-image:\r\n    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),\r\n    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);\r\n  background-position:\r\n    var(--_p,0%) var(--_p,0%),\r\n    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));\r\n  background-size: var(--s) var(--s);\r\n  background-repeat: no-repeat;\r\n  cursor: pointer;\r\n  transition: \r\n    background-position .3s var(--_i,.3s), \r\n    background-size .3s calc(.3s - var(--_i,.3s));\r\n}\r\nimg.alt {\r\n  background-image:\r\n    conic-gradient(from 180deg at top    var(--b) right var(--b),#0000 25%,var(--c) 0),\r\n    conic-gradient(from   0deg at bottom var(--b) left  var(--b),#0000 25%,var(--c) 0);\r\n  background-position:\r\n    calc(100% - var(--_p,0%)) var(--_p,0%),\r\n    var(--_p,0%) calc(100% - var(--_p,0%));\r\n}\r\nimg:hover {\r\n  background-size: calc(100% - var(--g)) calc(100% - var(--g));\r\n  --_p: calc(var(--g)\/2);\r\n  --_i: 0s;\r\n}\r\n\r\n\r\n\r\nbody {\r\n  margin: 0;\r\n  min-height: 100vh;\r\n  display: grid;\r\n  grid-auto-flow: column;\r\n  gap: 20px;\r\n  place-content: center;\r\n  place-items: center;\r\n  background: #99B2B7;\r\n}<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created a border that show on corners only. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This simple CSS code snippet helps you to draw corners only border of an HTML element on hover event. It&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7319,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-7299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Border Corners only Hover &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a simple CSS code snippet to create corners only border on hover. You can view demo and download source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Border Corners only Hover &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a simple CSS code snippet to create corners only border on hover. You can view demo and download source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T17:48:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:49:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"CSS Border Corners only Hover\",\"datePublished\":\"2024-01-11T17:48:00+00:00\",\"dateModified\":\"2024-01-22T10:49:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\"},\"wordCount\":153,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png\",\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\",\"name\":\"CSS Border Corners only Hover &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png\",\"datePublished\":\"2024-01-11T17:48:00+00:00\",\"dateModified\":\"2024-01-22T10:49:59+00:00\",\"description\":\"Here is a simple CSS code snippet to create corners only border on hover. You can view demo and download source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png\",\"width\":1280,\"height\":960,\"caption\":\"CSS Border Corners only Hover\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Border Corners only Hover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Border Corners only Hover &#8212; CodeHim","description":"Here is a simple CSS code snippet to create corners only border on hover. You can view demo and download source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/","og_locale":"en_US","og_type":"article","og_title":"CSS Border Corners only Hover &#8212; CodeHim","og_description":"Here is a simple CSS code snippet to create corners only border on hover. You can view demo and download source code.","og_url":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T17:48:00+00:00","article_modified_time":"2024-01-22T10:49:59+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"CSS Border Corners only Hover","datePublished":"2024-01-11T17:48:00+00:00","dateModified":"2024-01-22T10:49:59+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/"},"wordCount":153,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png","articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/","url":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/","name":"CSS Border Corners only Hover &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png","datePublished":"2024-01-11T17:48:00+00:00","dateModified":"2024-01-22T10:49:59+00:00","description":"Here is a simple CSS code snippet to create corners only border on hover. You can view demo and download source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/css-border-corners-only-hover.png","width":1280,"height":960,"caption":"CSS Border Corners only Hover"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/css-border-corners-only-hover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"CSS Border Corners only Hover"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3563,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/7299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=7299"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/7299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/7319"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=7299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=7299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=7299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}