5. Borders, Shadows, and More
HTML/CSS Lesson Categories
These lessons focus on CSS decorative properties that add polish to a design. You will learn how to add borders, rounded corners with border-radius, and depth with box shadows and text shadows. You will also discover CSS generators — tools that write gradient and shadow code for you so you can experiment visually and copy the result.
Ready to test your knowledge?
5.1 CSS Borders
Learn how to add borders to any HTML element using CSS, controlling the width, style, and color to create dividers, outlined boxes, and decorative effects. This lesson includes the Border Generator tool to help you experiment with styles and copy ready-to-use CSS. Start the CSS Borders Lesson
5.2 CSS Border Radius
Learn how the border-radius property lets you soften the corners of any element, from subtly rounded buttons to perfect circles. The Border Generator also lets you experiment with border-radius values and copy the CSS. Start the CSS Border Radius Lesson
5.3 CSS Gradients
Learn how to use CSS gradients to build smooth color transitions for backgrounds and design elements. No image files needed, and they load faster too. This lesson includes the Gradient Generator tool to help you design gradients visually and copy ready-to-use CSS. Start the CSS Gradients Lesson
5.4 CSS Box Shadows
Learn how to use the box-shadow property to add depth and dimension to images, cards, and buttons. This lesson includes the Box Shadow Generator to help you design shadows visually and copy ready-to-use CSS. Start the CSS Box Shadows Lesson
5.5 CSS Text Shadows
Learn how to use the text-shadow property to add shadow effects to headings and text. This lesson includes the Text Shadow Generator to help you experiment with values and copy ready-to-use CSS. Start the CSS Text Shadows Lesson