The Designer’s Guide to CSS3: Border Treatments

Containers have been styled in every way imaginable over the years. Where creating fancy borders once required layering images and div tags, new CSS3 options make it easier to replicate Photoshop mockups and avoid bloated code.

The Designer’s Guide to CSS3

For times when a designer is restricted from using certain styles by the development team—such as CSS limitations and file size limits—these CSS3-based border styles circumvent many of these problems. Let’s dig into some of the specifics of what CSS3 allows for in terms of border effects: rounded corners, drop shadows and border images.

Rounded corners

Putting rounded corners on a container is an age-old practice—it’s been done in most every way imaginable. CSS3 simply provides a new, code based approach to doing so.

You can apply rounded corners to all corners of a container or just to individual ones. You can have each corner rounded differently or not all. Play with the CSS code generators listed below to see how the styles might work in your design.

Here’s an example of a CSS3-based container with rounded corners:

CSS3 rounded corners resources

Drop shadows

The drop shadow was popularized (and is often abused) thanks to the handy Photoshop layer style. When used with respect, it can work absolutely beautifully.

CSS3-based drop shadows have some really nice perks. One of the most annoying things for developers is when designers place tricked out containers with rounded corners and drop shadows over complex backgrounds. It’s possible to build but, historically, it’s been tricky. CSS3 makes it super simple to put a drop shadow on most anything, and it makes the code more stable and generally gives website more longevity.

The most significant limitation is browser support: If you need your drop shadows to work in all browsers (from someone running vintage 1998 Internet Explorer to the latest version of Chrome), you’ll have some trouble. If your design doesn’t rely on the drop shadows, you’re good to go. But if the page breaks or doesn’t work without the shadows, you may need to reconsider.

Here’s an example of a container with a CSS3-based drop shadow:

CSS3 drop shadow resources

Border Images

In CSS3 you can assign an image as the border of a container. The image is then stretched, as specified by your CSS, to wrap the container of content.

This new CSS element won’t have much of an impact on the designer who doesn’t code. If you’re crafting fancy containers that work well for this technique, the end results will probably look the same as they did with older approaches. The upside is that the underlying code is vastly simpler with this approach.

In the past, developers would nest lots of HTML div containers inside each other to have enough elements to latch backgrounds onto. So CSS3 creates an opportunity to add visual style without bloating the code. Here’s a sample of a border image and how it is sliced to be repeated on the container (click through for more details):

CSS3 border image resources

While these three visual styles aren’t new to web design, their code-based nature changes the way you can approach rounded corners, drop shadows and border images. Playing with these code generators should help you incorporate styles that match the code into your work.

You can even capture the code for the style you need in your design and share it with your developers as you hand over your work. That way you can give them exactly what you’re looking for. Frankly, they might be shocked to get such a thing, but it’s always better to be over-prepared. This is a surefire way to help ensure the final results match the design you created.

Next up: Backgrounds in CSS3

CSS3 Resources from MyDesignShop.com

COMMENT