Borders are used for a multitude of applications throughout the site to create a sense of space, order, and heierarchy. Three different colors for borders are used throughout the site. The first two are gray colors (#ddd and #ccc), while the second is the brand red (#a51417).
Gray Borders
Gray borders are typically always 1 pixel thick. These are used for more practical applications such as dividing content or calling out information.
In this example, you can see how borders are used on the School of Medicine site to separate content. The top border separates the navigation with the rest of the content on the page. This particular example shows a 1 pixel gray (#ccc) border. If you look down the page further, you can seea divider used for the callout "Read a Q&A with Dean Perlmutter...". This particular callout displays a top and bottom border of 1 pixel gray (#ddd).
Code
HTML
CSS
Red Borders
While gray borders are used for more pratical purposes, red borders are used as an accent and to re-establish the brand. These borders vary in thickness. In the below example, a thick red border is used to provide an accent between the body content and the footer. The footer color is enough distinction in the content separation, however, the red is used here as a design choice to accentuate the break in content.
