Box Borders and Backgrounds

Borders

On this page, we will explain how to change the thickness, color, curve, and shading of a box's border and how to add a background color.

This is the basic box code we recommend:

<div style="margin:1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;"> <p>Basic Box</p> </div>

This is the box that code will create:

Border Thickness

You may want to modify a box's border thickness. The basic box is using a border thickness of 2px. By increasing the number of pixels, you can change the visual weight of the box's border. The example below shows you line thicknesses in 5px, 10px, and 15px. The part of the code you are changing is in bold: 

<div style="margin:1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">

Border Color

You can change the border color of a box by changing the color code. The list of Penn State brand colors on the Color Codes and Information page of this guide will give you some good options. In these examples, the original color (#1E407C;) has been changed to show you Slate, Nittany Navy, and Pennsylvania Sky. The part of the code you are changing is in bold:

<div style="margin:1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">

Background Color

You can change the background color as well. The default color in our basic code is white (#ffffff;), but let's say you want a dark blue background. You can change the background color to Nittany Navy (#001E44;). If you do that, you'll also want to make the font a light color so that it's easy to read. You can do that easily by using the built-in text colors in the editor, or you can add a custom color. In this example, the text is light gray. The part of code you would change is in bold:

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; background: #001E44; font-size: 1rem; overflow: auto;">
  <span style="color: #ecf0f1;">Content inside the box.</span>
</div>

Curved Border Styles

If you want a curved box, just change the border-radius. The part of the code you would change is in bold:

<div style="margin:1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">.

Shaded Border Styles

Certain border-style properties (see examples provided) can be used to create shading (i.e., a combination of lighter and darker shades of the same color to create a variety of visual effects). 

<div style="border: 1rem groove #1E407C;">Content</div>

<div style="border: 1rem ridge #1E407C;">Content</div>

<div style="border: 1rem inset #1E407C;">Content</div>

<div style="border: 1rem outset #1E407C;">Content</div>

Best Practice: Check the Color Contrast

When changing the font and background colors, it's a good idea to use the accessibility checker  in the RCE to check the color contrast. Just select the accessibility icon, and a side panel will appear and flag low color contrast and allow you to adjust the colors to meet the contrast standard for accessibility. That will ensure that your content is easy to read.