Topic 12 of 62
Padding & Borders
Overview
Padding and Borders define the internal aesthetics of an element. Padding provides internal breathing room, preventing text from smashing into the edges of the box. Borders draw a physical line around the box. Modern CSS allows immense control over borders, including independent styling for each side, rounded corners (border-radius), and even utilizing images or gradients as border strokes.
Syntax
css
/* Padding Shorthand (Top, Right, Bottom, Left) - Clockwise! */
.card {
padding: 10px 20px 30px 40px;
}
/* 2-value Shorthand (Vertical Horizontal) */
.btn {
padding: 10px 24px; /* Top/Bottom: 10px | Left/Right: 24px */
}
/* Border Shorthand (Width, Style, Color) */
.box {
border: 2px solid #3b82f6;
/* Targeted borders */
border-bottom: 4px dashed red;
/* Rounded Corners */
border-radius: 8px;
/* Perfect Circle (if width == height) */
border-radius: 50%;
}Common Pitfalls
- Using
paddingto try and separate two sibling elements. Padding is internal. It pushes the content inward. If you want to push a neighboring element away, you must usemargin(external). - Setting
border-radius: 100%expecting a circle, but getting an ugly oval. If the element is a rectangle (width does not equal height), percentages will warp the curves into an oval. Useborder-radius: 9999pxto create a perfect pill shape, or ensure the box is a perfect square.
Interview Questions
Q:
If you declare
padding: 10px 20px 15px; (3 values), how are they applied?A:
Top is 10px. Left and Right are 20px. Bottom is 15px.
Real-World Example
Creating a modern, 'pill-shaped' button.
example
css
.pill-btn {
padding: 12px 32px;
background-color: black;
color: white;
/* A massive pixel value ensures the ends are perfectly semi-circular
regardless of how wide the button gets */
border-radius: 999px;
}Check Your Knowledge
Test your understanding of Padding & Borders with these quick questions.