How to Modify Images or Backgrounds Across Your Website With Simple CSS Code

Using CSS, you can add effects to your website's design to enhance its appearance, such as stitched or rounded borders, shadows, and background images. This can all be done with simple CSS3 coding.

For the sake of example, let's begin with a blank box that you can add these effects to. After that, we will examine how these can be applied to images. You can start by adding a div tag to your HTML, with class="customclass".

It will look like this in your HTML file:

Then go into your stylesheet and define your custom id or class.

Here are some basic attributes to get started:

customclass { background: #55ccaa; position: relative; width: 500px; height: 400px; margin: 20px; padding: 10px; }

BORDER EFFECTS

Thanks to CSS3, adding rounded corners to your box or image is simple.

All you need to do is write this code inside your custom class or id (this can be added to the "customclass" in your css file you just made:

border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

Your box should now have rounded corners. It is important to note that many of these effects will not show properly in Internet Explorer versions prior to version 9.