Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 24px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .solid { border: 2px solid #6366f1; padding: 16px 24px; border-radius: 8px; } .dashed { border: 2px dashed #10b981; padding: 16px 24px; border-radius: 8px; } .pill { border: 2px solid #f59e0b; padding: 16px 24px; border-radius: 999px; } .circle { width: 80px; height: 80px; background: #6366f1; border-radius: 50%; } .accent { border-left: 4px solid #6366f1; padding: 12px 20px; background: #ede9fe; } </style> </head> <body> <div class="solid">solid</div> <div class="dashed">dashed</div> <div class="pill">pill</div> <div class="circle"></div> <div class="accent">Accent border-left</div> </body> </html>
Result
Open