w3resource

CSS Properties: How to set the width of the left border?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the width of the left border</title><!-- Title of the HTML document -->
<style type="text/css">
/* CSS styling */
h1  {
border-style: solid; /* Sets the border style for h1 elements to solid */
border-left-width: 10px; /* Sets the width of the left border for h1 elements to 10 pixels */
}
</style>
</head>
<body>
<p>w3resource Tutorial</p><!-- Paragraph content -->
<h1>border left width</h1><!-- h1 element with a left border of specified width -->
<p><b>Note:</b> The "border-left-width" property does not work if it is used alone.</p><!-- Note regarding usage of "border-left-width" property -->
</body>
</html>

Explanation:

  • This HTML document demonstrates how to set the width of the left border for an h1 element.
  • The h1 elements have a common style with a solid border, and the width of the left border is set to 10 pixels.
  • A note is provided to indicate that the border-left-width property may not have an effect if used alone, as other border properties such as border-left-style and border-left-color are often required for a complete border definition.

Live Demo:

See the Pen border-left-width-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html-css-exercise/css-properties/border-left-width-answer.php