cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <h2>"Body Border, Rounded Inside" as suggested by <a href="http://dabblet.com/gist/5377617">Lea Verou</a></h2>
<p>This doesn't work because the border should be above body content yet the element shouldn't block user from selecting text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis blandit quam, faucibus imperdiet nibh venenatis a. Sed condimentum varius augue, et sagittis libero tempor et. Curabitur quis purus ac nisi fermentum semper ac non ipsum. Praesent id vestibulum quam. Phasellus id dui orci. Proin in nisi ac lectus aliquam volutpat. Quisque eget tristique elit. Nulla ut mauris nec arcu gravida posuere ac eget odio. Integer luctus nisi ut lectus volutpat eget pellentesque nisl egestas.</p>
<p>Fusce a lorem non neque bibendum adipiscing vel elementum ipsum. Maecenas ornare mauris iaculis dui faucibus sit amet sodales libero venenatis. Maecenas posuere varius arcu nec commodo. Suspendisse mattis pellentesque lacus nec egestas. Etiam eu erat quam. Phasellus sit amet sapien vitae quam facilisis eleifend. Fusce sodales placerat elit, eu blandit augue viverra et. Sed et tellus dui, quis sodales arcu. Nunc pellentesque ornare ipsum, a scelerisque lectus aliquet at. Aliquam elit arcu, volutpat sed tincidunt ac, consequat vitae dolor. Aenean pharetra commodo dignissim. Pellentesque non odio quis nisl mattis congue. Praesent tellus nunc, auctor vitae scelerisque ut, vehicula rutrum nisi. Nullam quam diam, congue a porta a, rhoncus vitae tortor. Quisque eget erat non neque suscipit dapibus. Sed et nisl purus.</p>
<p>Fusce neque felis, tempus sit amet bibendum at, ultrices interdum elit. Nunc ut erat mauris. Integer dictum, neque a hendrerit sagittis, ligula arcu suscipit mauris, pulvinar congue nibh ipsum id tortor. Etiam tellus magna, commodo porta sodales ac, convallis eget metus. Phasellus bibendum risus ac lacus eleifend eget rutrum neque tincidunt. Quisque vel nisi sem, nec sodales magna. Sed augue sem, convallis id convallis ac, tincidunt eu sem. Vivamus id massa ante, vel porttitor elit. Donec at dui lectus, quis vestibulum quam. Ut a nulla nec nisl ultrices auctor. Vestibulum et mi at nisl ullamcorper tristique.</p>
<p>Proin fringilla gravida libero, vitae tristique neque semper et. Nam tempor facilisis lobortis. Donec molestie, massa quis volutpat hendrerit, mi velit aliquam dui, sit amet mollis nulla mi vitae felis. Proin posuere enim in lectus dapibus at rhoncus massa blandit. Quisque hendrerit, mauris eget vulputate sodales, dui turpis convallis urna, sed interdum leo dui varius nisi. Donec tristique dictum quam eget auctor. Sed fermentum blandit quam ut placerat. Morbi non purus nunc. Vivamus sollicitudin tristique congue. Donec molestie, tellus quis ultrices eleifend, ipsum mi faucibus lacus, non bibendum nulla nunc vel purus. Nulla euismod iaculis tellus sit amet sodales. Sed et nibh nunc.</p>
<p>Aliquam at arcu vel quam euismod hendrerit eget accumsan diam. Aenean vehicula placerat lectus id sodales. Aliquam ut euismod odio. Praesent tempus luctus malesuada. Praesent tortor nibh, aliquet eget aliquet sed, fermentum sit amet mauris. Donec tincidunt arcu sed nunc rutrum nec auctor lorem fringilla. Vestibulum neque augue, placerat eu viverra vestibulum, cursus in enim. Phasellus eu ante massa. Morbi eu nulla et neque aliquam dignissim ut eget nisl. Suspendisse leo metus, mattis sed consectetur sit amet, ullamcorper ut diam.</p>
              body:before {
  border-radius: 2em;
  box-shadow: 0 0 0 50em #F06;
  content: '';
  opacity: 1;
  position: fixed;
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
  /* giving positive z-index makes border go above content,
    but it also blocks access to the content */
  z-index: -1;

body {
  margin: 2em;

p {
  max-width: 55em;

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................