w3resource

CSS Properties: How to sets all the border properties in one declaration?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to sets all the border properties in one declaration</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
h1.xyz {
border-style: solid; /* Setting border style to solid for elements with class "xyz" */
border-width: 1px; /* Setting border width to 1 pixel for elements with class "xyz" */
}
h1.xyz1 {
border-style: solid; /* Setting border style to solid for elements with class "xyz1" */
border-width: medium; /* Setting border width to medium for elements with class "xyz1" */
}
h1.xyz2 {
border-style: solid; /* Setting border style to solid for elements with class "xyz2" */
border-width: 5px; /* Setting border width to 5 pixels for elements with class "xyz2" */
}
</style>
</head>
<body>
<h1 class="xyz">w3resource JavaScript Tutorial.</h1><!-- Heading with class "xyz" -->
<h1 class="xyz1">w3resource Python Tutorial</h1><!-- Heading with class "xyz1" -->
<h1 class="xyz2">w3resource Redis Tutorial.</h1><!-- Heading with class "xyz2" -->
<p><b>Note:</b> The default value is medium none color.</p><!-- Note about default border values -->
</body>
</html>

Explanation:

  • This HTML document demonstrates how to set all the border properties in one declaration using CSS.
  • The CSS style block defines styling for different classes of heading elements.
  • For each class (xyz, xyz1, xyz2):
    • border-style: solid; sets the border style to solid.
    • border-width is set to different values (1px, medium, 5px) to demonstrate different border widths.
  • The HTML content consists of headings (<h1>) with different classes and a note explaining default border values.

Live Demo:

See the Pen border-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-answer.php