Skip to content

Instantly share code, notes, and snippets.

@MogulChris

MogulChris/border-image.html

Created October 29, 2023 19:45
Show Gist options
  • Save MogulChris/cd18bc103b7100e0ecfd79f21284c1de to your computer and use it in GitHub Desktop.
Save MogulChris/cd18bc103b7100e0ecfd79f21284c1de to your computer and use it in GitHub Desktop.
Download ZIP
CSS border image notes
Raw
border-image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<style>
button {
appearance: none;
background-color: transparent;
text-align: center;
padding: 30px 50px;
/*
The image is an svg of the desired fancy button, perhaps with complicated borders including angles and gaps.
The key rule here is border-image-slice.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
This rule says how to divide up the image to use as a border - top, right, bottom, left
These values will need to change depending on the image, but the idea is to slice at the appropriate points
so your image tiles nicely in the middle section, to allow for a variable amount of button label text
*/
border-image: url(fancy-button.svg);
border-image-slice: 50% 20% 50% 10%;
border-image-width: auto;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<button>Click here to add more text, it can go really long if needed</button>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
fancy-button.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment