← Back to Tutorials Chapter 8

Advanced Styling

So far you've learned the foundations of CSS. Now it's time to unlock the creative tools that make modern websites visually stunning: rounded corners, gradients, shadows, custom fonts, transforms, transitions, and animations.

Border Radius — Rounded Corners

The border-radius property rounds the corners of an element. You can set one value for all corners or individual values.

/* All corners */
.box { border-radius: 10px; }

/* Elliptical corners */
.box { border-radius: 50%; }

/* Individual corners: top-left top-right bottom-right bottom-left */
.box {
  border-radius: 10px 20px 30px 40px;
}

Border Image

The border-image property lets you use an image as a border around an element.

.card {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

CSS Gradients

Gradients let you display smooth transitions between two or more specified colors.

Linear Gradient

.gradient-linear {
  background: linear-gradient(to right, red, yellow);
}

/* Diagonal */
.gradient-diagonal {
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
}

Radial Gradient

.gradient-radial {
  background: radial-gradient(circle, #fff, #3b82f6);
}

Conic Gradient

.gradient-conic {
  background: conic-gradient(red, yellow, green, blue, red);
  border-radius: 50%;
}

Box Shadow

Add depth to elements with box-shadow. The syntax is: offset-x offset-y blur-radius spread-radius color.

.shadow-light {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.shadow-heavy {
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Multiple shadows */
.shadow-multi {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1),
              0 8px 16px rgba(0,0,0,0.1);
}

Text Shadow

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.text-glow {
  text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6;
}

Text Effects

Text Overflow

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Word Wrap

.break-long {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

Custom Fonts with @font-face

Use @font-face to load custom fonts so your site isn't limited to web-safe fonts.

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2'),
       url('fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

CSS Transforms

Transform allows you to rotate, scale, translate, or skew an element.

.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.translate { transform: translate(50px, 100px); }
.skew { transform: skew(10deg, 5deg); }
.multiple { transform: rotate(30deg) scale(1.2) translateX(20px); }

CSS Transitions

Transitions smoothly change property values over a given duration.

.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

CSS Animations with @keyframes

Animations let you create complex, multi-step motion sequences.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animated {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

.bouncing {
  animation: bounce 1s ease infinite;
}

CSS Tooltips

Pure CSS tooltips use ::after pseudo-elements and :hover to show extra information.

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip:hover::after {
  opacity: 1;
}