Home
•
Contact
•
Privacy Policy
•
ToS
🔍
CSS Curly Brace
Learn how to create CSS Curly Brace using html, css and/or js.
<div id="curly-brace"> <div id="left" class="brace"></div> <div id="right" class="brace"></div> </div> <style> body { background-color: #39F; color: #FF3; } #curly-brace { width: 300px; position: absolute; left: 50%; margin-left: -150px; top: 150px; } .brace { border-bottom: 5px solid; margin: 0 10%; width: 30%; height: 20px; float: left; } .brace:before, .brace:after { content: ""; width: 10%; height: 50px; position: absolute; display: block; } #left:before { border-bottom: 5px solid; border-bottom-left-radius: 20px; margin-left: -10%; margin-top: -30px; } #left:after { border-top: 5px solid; border-top-right-radius: 20px; margin-left: 30%; margin-top: 20px; } #right:before { border-top: 5px solid; border-top-left-radius: 20px; margin-left: -10%; margin-top: 20px; } #right:after { border-bottom: 5px solid; border-bottom-right-radius: 20px; margin-left: 30%; margin-top: -30px; } </style>
Random HTML Example Codes:
Howl's Moving Castle
Internal CSS
HTML <abbr> for Abbreviations
DataTables customize
HTML Tables
Background Color
Simple CSS Checkbox Tabs
Use of The class Attribute in JavaScript
HTML5 Canvas - Scratch Card
CSS Triangles and Pseudo Elements
FCC: Product Landing Page
HTML <kbd> For Keyboard Input
Inline Elements
CSS Only Ribbon
The Syntax For Class
Basic Drag and Drop
Rounded Corner Zebra-Striped Table
Pure CSS 5-Star rating with hover effect for rating entry
Transparent Arrow with CSS borders over an image
JavaScript Fingerprint
Animated Weather Icons
HTML Table Width
Basic Example of SVG Line Drawing, Backward and Forward
“Hypnotic” Logo Animation
Text Stroke / Text Shadow border css
Salarium Payslip Template
simple jquery popup
The HTML <title> Element
MasterSlider jQuery
Responsive Table using Tablesaw with Toggle and Mini Map
