Borders, Rounded Corners, and Box Shadows for eBook Design

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Adding Images

Now that you have a solid understanding of HTML and CSS, it is time to get into some of the bells and whistles. The CSS3 specification allows for a wide variety of ways to manipulate content presentation in an aesthetically pleasing manner. Unfortunately, many of these CSS properties are not supported for e-ink Kindles and Kindle for iOS; however, many modern eReading devices will hopefully begin to support them soon. All advanced CSS properties will be tested on the Kindle Fire for the purposes of this guide.

Borders

While placing a border around an image or paragraph of text is nothing new, it was not fully-supported on the Kindle until the KF8 format came around in 2011. Recall from the CSS Box Model discussion that the border encloses the content and padding area, but not the margin area.

There are three main CSS properties when working with borders to define the thickness, style, and color of the border. The CSS properties are border-width, border-style, and border-color. This will define the style for all four sides of the rectangle that form the border. If you would like to define different styles for the top, right, bottom, or left part of the border, you can utilize properties such as border-left-width, border-top-style, border-bottom-color, etc.

The values of the border properties are fairly straightforward. border-width is defined in pixels, border-style can be solid, dashed, dotted, and a few others, and border-color is simply one of the hexadecimal color codes or predefined names.

Hypothetically, let's say we want to enclose an image with a red border and a paragraph of text with a dashed-black border. Some example CSS would be as follows:

img#redborder
{
border-width: 2px;
border-style: solid;
border-color: red;
}

p#dashedborder
{
border-width: 1px;
border-style: dashed;
border-color: black;
padding: 5px;
margin: 1em;
}

Borders on the Kindle Fire

When working with borders that enclose text, make sure that you add a bit of padding in your CSS. Otherwise, the inner edge of the border will butt up right against the text, creating less-than-pleasing results.

Tip: There is a shorthand way to define borders in your CSS. You can simply write three values in one declaration with the following syntax: border: width style color;. As an example for the image above, the CSS would become border: 2px solid red;. You can also use this short-hand if you only want to style one leg of your border (e.g. border-right: width style color;).

Rounded Corners

Ever since Apple became a mainstay in everyone's life, rounded corners have become ubiquitous. In the bad old days of design, it was a bit of challenge to create rounded corners, because it involved aligning a grid of images on the outside of the content. Fortunately, rounded corners require just one line of CSS for eReading devices and web browsers that support CSS3. To make the CSS box have rounded corners, you simply use the following declaration: border-radius: #px;, where the # value is the radius of the rounded portion of each corner. Additionally, you can specify different values for each corner with the properties border-top-left, border-top-right, border-bottom-right, and border-bottom-left.

As an example, say you wanted rounded corners on the previously-mentioned paragraph that had a dashed and black border. You simply need to add one line of CSS to achieve this effect:

p#dashedborder
{
border-width: 1px;
border-style: dashed;
border-color: black;
padding: 5px;
margin: 1em;
border-radius: 10px;
}

Rounded Corners on Kindle Fire

The 10px value may not be rounded enough for your liking, so please feel free to experiment by adjusting the radius value of the corner.

You can use the border-radius property even if there is no border. Perhaps you wanted a gray background that had no border, but was rounded off on the edges. This is a very common technique in web design, and it looks great on eBooks for things like pull quotes, tip boxes, and other content you would like to stand out from the regular content. Some example CSS is as follows:

p#graycallout
{
background-color: #999999;
padding: 5px;
margin: 1em;
border-radius: 15px;
}

Paragraph with Rounded Corners on the Background

On many CSS3 properties that are discussed online, you may see what are known as "vendor prefixes." Instead of the property border-radius, the property is written as -webkit-border-radius (for Webkit-based browsers like Safari and Chrome) or -moz-border-radius (for Gecko-based like Firefox). These prefixes permit designers to specify different values for different web browsers while all the titans of the tech industry agree on a unified standard. For the purpose of eBook design, you may consider adding the -webkit- prefix for your Kindle Fire and iBooks CSS3 properties along with the normal CSS3 property. In the case of rounded corners, you would simply write two lines of code instead of one:

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

Although, the Kindle Fire supports the border-radius property without the -webkit- prefix at the time of this writing.

Box Shadows

Another design nicety that used to be a difficult task is box shadows—the blurred shadow offset that creates a 3-dimensional look. These are common in text books, and they have only recently been made possible with eReading devices recognizing CSS3 properties. The basic CSS syntax for box shadows is as follows:

-webkit-box-shadow: [horizontal offset] [vertical offset] [blur distance (optional)] [color];

The four values specified must be separated by spaces, not commas. Additionally, the offsets can be negative. A negative horizontal offset will make the shadow go to the left, while a positive value will make the shadow go right. Additionally, a negative vertical offset will make the shadow go up, while a positive offset will make the shadow go down. Please note that the -webkit- prefix is required for the CSS to be recognized on the Kindle Fire. As with the border-radius property, it is permissible and recommended to include a CSS declaration without the -webkit- prefix in order to support eReading devices not utilizing the Webkit engine.

An example of a red box shadow that is dropped down and to the left of a box would be as follows:

p#redboxshadow
{
background-color: red;
padding: 5px;
margin: 1em;
border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -10px 10px 10px #999;
-webkit-box-shadow: -10px 10px 10px #999;
}

Box Shadow Example on Kindle Fire

This guide provides the most basic way to implement a box shadow, but there are many more options such as creating inner shadows, fine-tuning the "spread" of the shadow, and other tricks.

While the effects that these CSS3 statements produce may seem simple, they have only recently become supported for eBooks. Hopefully other eReading devices besides the Kindle Fire will become more CSS3-friendly, so that eBook developers can have more creativity and design freedom when they are crafting eBooks.

Next Post: Changing Fonts

Borders, Rounded Corners, and Box Shadows for eBook Design