Advanced Card border with html & css in 2022 by jishaansinghal
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: #060c21; } .container .box{ position: relative; width: 200px; height: 300px; background: #060c21; display: flex; justify-content: center; align-items: center; border: 1px solid #000; padding: 15px; } .container .box::before{ content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; background: #fff; transform: skew(2deg,2deg); z-index:-1; } .container .box::before{ background: linear-gradient(315deg,green, #fff); } h2,p{ color: #fff; font-weight: bold; } h2 { ...