XQA
Back to Web Development
2026-03-015 min read

Border Width (Web Development)

Learn Border Width (Web Development) step by step with clear examples and exercises.

Title: Border Width in Web Development: A full guide

Why This Matters

Border width is a crucial aspect of web development, as it determines the thickness of the border around HTML elements. Understanding and effectively utilizing border width can help you create visually appealing and well-structured websites. It's essential for both beginners and experienced developers to master this concept, as it plays a significant role in web design and can impact user experience.

Prerequisites

Before diving into the core concept of border width, it is important to have a good understanding of the following:

  1. HTML basics (tags, attributes, and elements)
  2. CSS fundamentals (selectors, properties, values, and cascading)
  3. Box model in web development (content, padding, border, and margin)

Core Concept

Understanding Border Width

In CSS, the border width of an HTML element can be specified using the border-width property. This property sets the thickness of the border on all sides (by default, it applies to the top, right, bottom, and left sides). You can also set individual border widths for each side using the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

The border-width property accepts three values:

  1. A single length value, which applies to all sides of the border.
  2. Three length values (in order: top, right, bottom, left), setting individual widths for each side.
  3. Two length values, where the first value sets the horizontal borders (top and bottom) and the second value sets the vertical borders (right and left).

Border Width Syntax

Here's a basic syntax example:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 200px;
height: 200px;
border-width: 5px; /* One value for all sides */
border-top-width: 10px; /* Top side only */
border-right-width: 7px; /* Right side only */
border-bottom-width: 3px; /* Bottom side only */
border-left-width: 8px; /* Left side only */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Shortcut Properties

Instead of using individual properties for each border width, you can use the border shorthand property. This property sets all four sides of the border at once:

  1. border: thickness solid color style; - Sets the border width, color, and style (solid by default) in one line.
  2. border: top-width right-width bottom-width left-width solid color style; - Allows you to set individual widths for each side.
  3. border: horizontal-width vertical-width solid color style; - Sets the horizontal and vertical border widths in one line.

Border Width Examples

<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid red; /* All sides with one value */
border-top: 10px solid blue; /* Top side only */
border-right: 7px solid green; /* Right side only */
border-bottom: 3px solid yellow; /* Bottom side only */
border-left: 8px solid purple; /* Left side only */
}
p {
width: 100%;
height: 50px;
border: 2px solid black; /* All sides with one value */
border: 1px solid blue 3px solid red 5px solid green; /* Multiple values, top to bottom */
}
</style>
</head>
<body>
<div></div>
<p>Example text here</p>
</body>
</html>

Worked Example

In this example, we'll create a simple web page with a container and three buttons. Each button will have a different border width:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 400px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: space-around;
align-items: center;
}
button {
padding: 10px 20px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}
#button1 {
border-width: 2px;
}
#button2 {
border-top-width: 5px;
border-right-width: 3px;
border-bottom-width: 7px;
border-left-width: 8px;
}
#button3 {
border: 10px solid red 20px solid green 30px solid blue;
}
</style>
</head>
<body>
<div class="container">
<button id="button1">Button 1 (2px)</button>
<button id="button2">Button 2 (Custom Widths)</button>
<button id="button3">Button 3 (Multiple Values)</button>
</div>
</body>
</html>

Common Mistakes

  1. Forgetting to close the border-width, border-top-width, etc., properties with a semicolon.
  2. Using inconsistent units (e.g., mixing pixels and percentages).
  3. Setting border widths that are too small or too large, leading to poor visual appearance.
  4. Misunderstanding the order of values in the border shorthand property.
  5. Neglecting to set individual border widths when using the border-width property.
  6. Failing to account for the box model and adjust border width accordingly.

Practice Questions

  1. Create a web page with three buttons, each having a different border style (solid, dashed, dotted).
  2. Write CSS to create a container with a 5px solid black border and padding of 20px on all sides.
  3. Modify the previous example so that Button 1 has a red border, Button 2 has a green border, and Button 3 has a blue border.
  4. Create a web page with an image and a caption, where the border around the image is 5px solid black, and the padding between the image and the caption is 10px on all sides.

FAQ

Q: Can I use percentages for border widths?

A: Yes, you can set border widths using percentage values, but keep in mind that they are relative to the element's width or height (depending on which dimension the border is applied).

Q: How do I create a border with rounded corners?

A: You can use the border-radius property to set the radius of the corners for each side individually or globally. For example, border-radius: 10px; sets all four corners to have a radius of 10 pixels.

Q: What is the default border width when I don't specify it?

A: The default border width when you don't explicitly set it is 1 pixel. However, some browsers may display different defaults, so it's always best to specify your desired border width.

Border Width (Web Development) | Web Development | XQA Learn