Border-image
How do I make an border-image?
What is a border-image? How do you make a border-image? This script and codes were developed by Dean Leigh on 25 January 2023, Wednesday.
Border-image - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>border-image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="thing"></div>
<div class="thing2"></div>
</body>
</html>
Border-image - Script Codes CSS Codes
.thing { width: 20rem; height: 20rem; margin: auto; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/126464/image_01_m.jpg"); border: 1rem solid transparent; border-radius: 50%; // as you can see it doesnt clip -moz-border-image: -moz-linear-gradient(top left, red 50%, blue 50%); -webkit-border-image: -webkit-linear-gradient(top left, red 50%, blue 50%); border-image: linear-gradient(to bottom right, red 50%, blue 50%); border-image-slice: 1;
}
.thing2 { width: 20rem; height: 20rem; margin: 1rem auto; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/126464/image_01_m.jpg"); border-radius: 50%; border-top: 1rem solid red; border-right: 1rem solid blue; border-bottom: 1rem solid blue; border-left: 1rem solid red;
}
Developer | Dean Leigh |
Username | deanleigh |
Uploaded | January 25, 2023 |
Rating | 3 |
Size | 1,624 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Menu Test - 02 | 2,979 Kb |
Jquery removeClass addClass | 1,657 Kb |
Background Image Transitions | 1,807 Kb |
New Menu Bar Data Attribute mark up | 18,798 Kb |
Border Gradients Basic | 1,490 Kb |
Data Atts - 01 | 2,010 Kb |
Features - Lists in areas | 2,361 Kb |
Grid - Floats - Mobile First | 2,254 Kb |
CSS Animation playing | 1,729 Kb |
BEM Features | 1,356 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!