Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
border
<div class="default exemple-none">border-style : none </div> <div class="default exemple-dotted">border-style : dotted </div> <div class="default exemple-dashed">border-style : dashed </div> <div class="default exemple-solid">border-style : solid </div> <div class="default exemple-double">border-style : double </div> <div class="default exemple-groove">border-style : groove </div> <div class="default exemple-ridge">border-style : ridge </div> <div class="default exemple-inset">border-style : inset </div> <div class="default exemple-outset">border-style : outset </div> <div class="default exemple-dashed-inset-groove-double">border-style : dashed inset groove double </div>
.default{ border-color : #665; border-width : 5px; margin : 10px 0; padding :2px;} .exemple-none{ border-style : none } .exemple-dotted { border-style : dotted } .exemple-dashed { border-style : dashed } .exemple-solid { border-style : solid } .exemple-double { border-style : double } .exemple-groove { border-style : groove } .exemple-ridge { border-style : ridge } .exemple-inset { border-style : inset } .exemple-outset { border-style : outset } .exemple-dashed-inset-groove-double {border-style : dashed inset groove double }
16
Border Style
By:
Jusar Pogi
<div class="block"></div>
body { margin: 0; padding: 0; background-color: #000; } .block { position: relative; margin: 300px auto 0; width: 500px; height: 250px; background: linear-gradient(0deg, #000, #272727); } .block:before, .block:after { content: ''; position: absolute; left: -2px; top: -2px; background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: steam 20s linear infinite; } @keyframes steam { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .block:after { filter: blur(50px); }
16
Colorful Border Animation
By:
Nethan Pogi
<h2>Border style value</h2> <div class="border-style-box"> <div class="border-style solid"> solid </div> <div class="border-style double"> double </div> <div class="border-style dashed"> dashed </div> <div class="border-style dotted"> dotted </div> <div class="border-style groove"> groove </div> <div class="border-style ridge"> ridge </div> <div class="border-style inset"> inset </div> <div class="border-style outset"> outset </div> <div class="border-style hidden"> hidden </div> <div class="border-style none"> none </div> </div>
h2 { margin: 10px 20px; } .border-style-box { display: flex; flex-wrap: wrap; margin: 10px 20px; } .border-style { display: flex; align-items: center; padding: 0.5rem; background-color: rgb(186, 85, 211, 0.1); height: 200px; margin: 1rem 0.4rem; } .solid { border: 2px solid #ba55d3; } .double { border: 4px double #ba55d3; } .dashed { border: 2px dashed #ba55d3; } .dotted { border: 2px dotted #ba55d3; } .groove { border: 4px groove #ba55d3; } .ridge { border: 4px ridge #ba55d3; } .inset { border: 4px inset #ba55d3; } .outset { border: 4px outset #ba55d3; } .hodden { border: 2px hidden #ba55d3; } .none { border: none; }
9
Border Style Value
By:
Nethan Pogi
<div class="ccs-traceWrap"> <div class="ccs-traceCard"> <h3>Border Trace</h3> <p>It looks complex, but it’s just a rotating gradient wrapper.</p> </div> </div>
body{ margin:0; min-height:100vh; display:grid; place-items:center; background:#fff; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#0b1020; } /* Animated gradient wrapper */ .ccs-traceWrap{ width:min(380px, 92vw); border-radius:18px; padding:2.5px; --ccs-angle: 0deg; background: conic-gradient( from var(--ccs-angle), #3b82f6, #111827, #ec4899, #06b6d4, #3b82f6 ); animation: ccs-rotate 1.9s ease-in infinite; } /* Inner card stays static */ .ccs-traceCard{ border-radius:17px; padding:12px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow: 0 18px 40px rgba(0,0,0,.08); } /* Animate the gradient angle */ @keyframes ccs-rotate{ to{ --ccs-angle: 180deg; } }
3
Border Trace
By:
Nethan Pogi
