Understanding the Border-Width Property in HTML

In HTML and CSS, adjusting the physical appearance of a website often requires manipulating various elements' sizes and shapes - including their borders. The quiz question asks - "What property is used to change the size of an HTML element's border?" The correct answer is "border-width:3px;".

This particular property, border-width, is used to set the width of the four borders of an element. The value we place after the property (in this case, "3px") specifies the size of the border.

To understand how it works, consider the example below:

<style>
  .box {
    border-style: solid;
    border-width: 3px;
  }
</style>
<div class="box">Hello, World!</div>

In this example, a class named 'box' is created with a solid border style. The border-width: 3px; within the class defines that all four sides of the border will be three pixels wide. When applied to the HTML element, like a 'div', it will display a box with a 3px border around the text 'Hello, World!'.

The border-width value doesn't always have to be in pixels. It can be defined in various units such as em, rem, percentages, etc., or can also be specified in relative values such as thin, medium, and thick.

A four-sided border width could also be set distinctly for each side, by specifying four different values like so: border-width: 3px 5px 2px 1px;, which corresponds to top, right, bottom, and left borders respectively.

Design-wise, it's considered best practice to keep the borders consistent throughout the website for a cohesive look and feel. The border-width property is also highly useful when you want to emphasize or highlight certain elements on a page.

Thus, understanding how to manipulate an HTML element's border using the border-width property enables developers to fine-tune a website's aesthetics, and provide clarity and emphasis where needed.