Differences Between CSS2 & CSS3

Last Updated on February 8, 2022

Differences Between CSS2 & CSS3 | CSS2 & CSS3: The Differences Text
The biggest difference between CSS2 and CSS3 is that CSS3 is now split into different modules. Since each module makes its way through the W3C individually, there’s a wider range of browser support. Make sure you test your CSS3 pages in as many browsers and operating systems as possible to ensure compatibility.

Multiple Backgrounds
Background-image, background-position and background-repeat can now be used to specify multiple background images to be layered on top of one another. The first image is closest to the user, with the following image layered behind. If there is a background color, it’s painted below all the image layers.

#example1 {
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;

That! Company provides captivating and effective web design services for agencies world-wide.  Learn More about our White Label Web Design Services  and how we can help you and your clients create or improve their web presence.  Get started today!



Prior ways to get multiple backgrounds required the following HTML…
<body bgcolor=”transparent” style=”background-image:url(/templates/name/images/background.jpg); background-repeat:repeat-x; background-position:top”>
then add to your css file
html {background-image:url(/templates/name/images/backgroundnew.jpg)}


New Background Style Properties

Background-clip: how the background image should be clipped.
Background-origin: whether background should be placed in the padding box, the border-box, or the content box.
Background-size: determines the size of the background image. This allows stretching smaller images to fit a page.

That! Company White Label Services


Border Properties
Borders are still what we’re used to (solid, double, dashed, etc.). Now you can create rounded corners.

div {
border: 2px solid;
border-radius: 25px;


Border images are new because you can create an image of all four borders.

div {
border-image:url(border.png) 30 30 30 30 round round;


*Internet Explorer does not support the border-image property.

Written By: Izaak Hale – Graphic/Web Design

Listen to our CEO’s podcast “The Daily Drive” to stay driven and get great business insights from top business leaders. – Are you ready to scale your agency with a quality white label SEO, white label PPC, or white label social media provider?
If so schedule a meeting here –