CSS Backgrounds & Borders
In this lesson, we’ll explore how to beautifully design backgrounds and borders in CSS. From setting a background image to adding gradients and creating neat card effects with box-shadow
and border-radius
, you’ll learn all the essential visual tricks used in real websites.
background
Property – The Basics
body {
background-color: #f5f5f5;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
You can combine all like this:
background: #f5f5f5 url("bg.jpg") no-repeat center top / cover;
background-size
cover
– fills entire area (may crop)contain
– fits image fully inside
background-size: cover;
background-repeat
repeat
,no-repeat
,repeat-x
,repeat-y
background-position
Set X and Y position
Example: center center
, top left
, 50% 20px
background-attachment
scroll
(default),fixed
(parallax effect)
background-clip
Controls how far background extends:
.box {
background-clip: padding-box;
}
border-box
: includes borderpadding-box
: up to paddingcontent-box
: only content area
background-blend-mode
Blends background layers like Photoshop:
.box {
background-color: red;
background-image: url("texture.jpg");
background-blend-mode: multiply;
}
Common values: multiply
, overlay
, screen
, darken
, lighten
CSS Gradients
Linear Gradient:
cssCopyEditbackground: linear-gradient(to right, #4facfe, #00f2fe);
Radial Gradient:
background: radial-gradient(circle, #ff9a9e, #fad0c4);
Layered example:
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("image.jpg");
CSS Borders
Basic Border:
border: 2px solid #333;
Individual sides:
border-top: 1px solid red;
border-radius: 8px;
Rounded Corners:
border-radius: 12px;
Individual corners:border-top-left-radius
, etc.
box-shadow
Adds shadow around boxes:
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
Syntax: horizontal
, vertical
, blur
, spread
, color
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* inner shadow */
Quick Card Example
.tutorials-card {
background: linear-gradient(to right, #fff, #f0f0f0);
border: 1px solid #ccc;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
}
✅ Summary Covered
- Background: color, image, repeat, size, position, clip, attachment, blend
- Gradients: linear and radial
- Borders: full and side borders, radius
- Box Shadow: outer and inner shadows