CSS: Adding Border Box with border: 1px solid #ccc; padding: 10px;
📝 Usage
This template demonstrates how to create a box with a border and padding using the CSS properties border: 1px solid #ccc; and padding: 10px;.
📘 Explanation
The CSS code above uses border: 1px solid #ccc; to add a border and padding: 10px; to add padding inside the box. The width and margin are also set to center the box on the page.
🔹 Partial Code
This box has a border and padding applied.
<div class="demo-area">
<p>This box has a border and padding applied.</p>
</div>
<style>
.demo-area {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
width: 300px;
margin: 20px auto;
}
</style>
💻 Full HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS: Adding Border Box with border: 1px solid #ccc; padding: 10px;</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
width: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="demo-area">
<p>This box has a border and padding applied.</p>
</div>
</body>
</html>
💻 Full Working Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS: Adding Border Box with border: 1px solid #ccc; padding: 10px;</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
width: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="demo-area">
<p>This box has a border and padding applied.</p>
</div>
</body>
</html>
📌 Practical Use of Bordered Boxes
Simple bordered boxes are a fundamental element of web design and can be used in a variety of contexts. Combining border and padding is ideal for visually separating content while providing comfortable spacing.
🎨 Design Variations
Changing the border style alone can give a completely different impression. Use border: 2px dashed #999; for a dotted line or border: 3px double #333; for a double line. You can also add border-radius: 8px; to create soft, rounded corners.
📱 Responsive Design Tips
For mobile responsiveness, it’s helpful to reduce padding, such as with padding: 5px;. Using media queries like @media (max-width: 768px) { .demo-area { width: 90%; padding: 8px; } } will help maintain readability on smaller screens.
Bordered boxes are useful for highlighting notes, supplemental information, grouped form fields, or product descriptions. You can make them stand out even more by setting a background color such as background-color: #f9f9f9;.
Consistency in border style across the entire site is essential. Keeping colors, thickness, and rounded corners uniform creates a professional look. You can also add a shadow like box-shadow: 0 2px 4px rgba(0,0,0,0.1); to give a sense of depth and emphasis.