Borders With Vertical and Horizontal Lines
Code Snippet Library
On this page, we'll demonstrate how to use horizontal and vertical lines to create borders for a video iframe and text. The example code will give you an idea of how to combine multiple styles within one <div> tag to control margins, spacing, thickness, and color.
Video iFrame Border
Video 2.2. Penn State Values: Excellence
Decorative Accent Borders Code to Copy
<div style="border-right: solid 0.75rem #1E407C; max-width: 600px; padding-bottom: 0.25rem; margin: 1rem 0;">
<div style="border-right: solid 0.5rem #1E407C; max-width: 580px; margin-right: 0.75rem;">
<iframe src="[SOURCE URL]"></iframe>
<hr style="border-top: solid 0.25rem #1E407C; margin: 0.25rem -10% 0.25rem 10%;" />
<p>Video [#.#. TITLE]</p>
</div>
</div>
Text Border
Case Study
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut. Libero nunc consequat interdum varius sit. Tortor at auctor urna nunc. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Viverra aliquet eget sit amet. Faucibus in ornare quam viverra orci sagittis eu volutpat. Nisl condimentum id venenatis a. Accumsan tortor posuere ac ut consequat semper. Massa enim nec dui nunc. Praesent tristique magna sit amet purus gravida. Platea dictumst quisque sagittis purus. Mattis aliquam faucibus purus in massa tempor. Iaculis urna id volutpat lacus. Metus aliquam eleifend mi in nulla. Consectetur libero id faucibus nisl tincidunt eget nullam.
At urna condimentum mattis pellentesque id nibh tortor. Sed libero enim sed faucibus turpis. Viverra nibh cras pulvinar mattis nunc. Eget aliquet nibh praesent tristique magna sit amet. Enim tortor at auctor urna nunc id cursus metus. Bibendum ut tristique et egestas quis ipsum suspendisse. Massa ultricies mi quis hendrerit dolor. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Diam maecenas sed enim ut sem viverra aliquet. Dolor morbi non arcu risus quis varius quam. Pellentesque elit ullamcorper dignissim cras tincidunt. In aliquam sem fringilla ut morbi. Eget duis at tellus at urna condimentum mattis. Odio pellentesque diam volutpat commodo sed egestas. Auctor urna nunc id cursus metus aliquam eleifend mi in. Ultrices gravida dictum fusce ut placerat orci nulla. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Quam lacus suspendisse faucibus interdum posuere lorem. Volutpat consequat mauris nunc congue.
Decorative Accent Borders Code to Copy
<div style="border-left: solid 0.75rem #1E407C; max-width: 90%; padding-top: 0.75rem; margin: 1rem 5vw;">
<div style="border-left: solid 0.5rem #1E407C; margin-left: 0.75rem; padding: 1.5rem 1rem;">
<h2>Case Study</h2>
<hr style="position: relative; left: -3rem; border-top: solid 0.25rem #1E407C; margin: 0.25rem 2.5vw 1.5rem -2.5vw;" />
<p>[CONTENT]</p>
</div>
</div>
Image Borders
Borders can also be added to images. For more information and ideas, see the Image Borders page of the Images Module