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
<div style="border-right: solid 0.75rem #BE0000; max-width: 600px; padding-bottom: 0.25rem; margin: 1rem 0;">
<div style="border-right: solid 0.5rem #890000; max-width: 580px; margin-right: 0.75rem;">
<iframe src="[SOURCE URL]"></iframe>
<hr style="border-top: solid 0.25rem #BE0000; margin: 0.25rem -10% 0.25rem 10%;" />
<p>Video [#.#. TITLE]</p>
</div>
</div>
Text Border
<div style="border-left: solid 0.75rem #BE0000; max-width: 90%; padding-top: 0.75rem; margin: 1rem 5vw;">
<div style="border-left: solid 0.5rem #890000; margin-left: 0.75rem; padding: 1.5rem 1rem 1.5rem 1.5rem;">
<h2 style="margin-top: 0;">Case Study</h2>
<hr style="position: relative; left: -3rem; border-top: solid 0.25rem #BE0000; 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
0 Comments
Add your comment