Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background: #ccc; font-size: 20px; text-align: center; } main div { display: flex; align-items: center; justify-content: center; color: black; padding-top: 30px; padding-bottom: 30px; width: 200px; height: 100px; margin: 15px; font-weight: bold; border: solid; } .flex-center { display: flex; justify-content: center; } /* border-left-width example classes */ .b1 { border-left-width: medium; } .b2 { border-left-width: thin; } .b3 { border-left-width: thick; } .b4 { border-left-width: 10px; } .b5 { border-left-width: initial; } .b6 { border-left-width: inherit; } </style> </head> <body> <h1>Border-left-width value examples</h1> <main class="flex-center"> <div class="b1"> medium </div> <div class="b2"> thin </div> <div class="b3"> thick </div> </main> <main class="flex-center"> <div class="b4"> 10px length </div> <div class="b5"> initial </div> <div class="b6"> inherit </div> </main> </body> </html>