Borders with Cut Corners in a Post-HTML5 World

In previous articles focusing on the technical side of creating Tau Station, we’ve discussed how our team is working hard to utilize inclusive design, how they’ve created an authoring tool to provide meaningful choices for players, and about their focus on writing clean database code. Today, we are going to discuss artist choices about borders which make game’s user interface (UI) visually complex and interesting, while still allowing the art assets to be usable in a variety of situations.

Tau Station has many different types of artist elements that use non-standard borders and edges. A design like this can be implemented in a variety of ways; with an older approach, which utilizes files in a PNG format, and which only consist of the file having one layer, or a newer approach, which is more complex, but which utilizes more layers and which is less limiting. We will focus on a new(ish) technique which seems to often be overlooked by many front-end developers, even in 2017.

Standard and Non-Standard Borders and Edges

A word about non-standard and standard borders and edges. What is standard? A standard HTML button, as an example, is quick and easy to implement, as it’s generally just a rectangle with a solid background. Buttons like these are often a standard request to implement to varying degrees in most front end work.

The button above has the standard 90 degree angles of a rectangle, and consists of two rectangles, in varying shades of blue, one on top of the other.

A button such as the one below, which has cut corners in the upper left and lower right, is non-standard. The cut edges need to scale dynamically with the regular, 90 degree ones, and to not distort when growing and shrinking the button. Styling design elements that are non-standard can sometimes be substantially more time consuming.

The User Interface for Local Shuttles (below) is one example in Tau Station of using non-standard borders and edges. Note the cut corners in the upper right and lower left of the outer rectangle. The cyan border decoration in the lower left also need to be able to scale dynamically with the rest of the art asset.

Work was initially done on some containers (HTML) in Tau Station with an older approach that uses purely PNGs for borders and 1 element per layer. This is limiting in that: PNG’s being bitmap are not scalable, or crisp and small file sizes, like SVGs (scalable vector graphics). While the older approach still works – I felt this wasn’t a robust enough solution for modern devices.

A note about PNG – I am not suggesting to switch out all of your images to SVG, and it largely depends on your use case. The bottom left cyan border decoration in the artwork above is the perfect use case for SVG image as an example.

The Old & the New Approach

The Old: One layer per element, cut all graphics up as a transparent PNG, and position each element absolute (position: absolute). This still works and is a valid solution. We are now living in very different times though. Not all of us still have CRT Monitor and IE8 as our primary browser.

The VIP Visa Service graphic above was built with pure CSS and a few SVGs, all using multiple backgrounds on the same element. The border was also implemented as a CSS linear-gradient for the cut corners.

Multiple Backgrounds Solves All

Multiple backgrounds are one of my most favorite things about HTML5 – especially when used in combination with CSS gradients, background-sizing, and positioning. This is an incredibly powerful tool set that can basically achieve most requirements – Plus it’s all CSS.

Supported by current browsers
Easy to control between breakpoints – small to large viewports and you can switch out images, or change the way background-size is applied at different viewports
Allows for scaling images with background-size for more fine tuned control
Uses background-repeat for repeatable graphics
Position with calc for dynamic sizing
Possible to layer just like z-index, only there will be no other z-index collisions with other elements in the page unrelated to the element

Conclusion & Useful Guides

Next time you are challenged by a design that has incredibly fancy border designs, take into consideration multiple backgrounds as the starting point.

Here are some links for anyone who wants to plunge deeper into the topic:

Other people might consider this approach once mastered.