Corners Covering Content Test

Testing how absolutely positioned corners interact with the content of a div.

by heygrady

HTML

<!-- No content wrapper, the spans cover the content -->
<div class="box ui-corners">
  <p>My content, without wrapper. The border covers the content.</p>
  <span class="ui-corners-corner ui-corners-corner-tl"></span>
  <span class="ui-corners-corner ui-corners-corner-tr"></span>
  <span class="ui-corners-corner ui-corners-corner-br"></span>
  <span class="ui-corners-corner ui-corners-corner-bl"></span>
  <span class="ui-corners-side ui-corners-side-top"></span>
  <span class="ui-corners-side ui-corners-side-right"></span>
  <span class="ui-corners-side ui-corners-side-bottom"></span>
  <span class="ui-corners-side ui-corners-side-left"></span>
</div>

<!-- with a content wrapper the spans are below the content -->
<div class="box ui-corners">
  <div class="ui-corners-content">
    <p>My content, safely wrapped. Using <code>z-index</code> to ensure the borders are beneath the content.</p>
  </div>
  <span class="ui-corners-corner ui-corners-corner-tl"></span>
  <span class="ui-corners-corner ui-corners-corner-tr"></span>
  <span class="ui-corners-corner ui-corners-corner-br"></span>
  <span class="ui-corners-corner ui-corners-corner-bl"></span>
  <span class="ui-corners-side ui-corners-side-top"></span>
  <span class="ui-corners-side ui-corners-side-right"></span>
  <span class="ui-corners-side ui-corners-side-bottom"></span>
  <span class="ui-corners-side ui-corners-side-left"></span>
</div>

<!-- By default border-radius does not clip content -->
<div class="box border-radius">
  <p>My content, with a <code>border-radius</code> applied. Content also peeks over the corner.</p></div>

<!-- Using overflow:hidden content is now clipped -->
<div class="box border-radius overflow">
  <p>My content, with a <code>border-radius</code> and <code>overflow: hidden;</code>applied. Content is clipped by the corner.</p></div>

CSS

/* Custom CSS*/
.box {
    float: left;
    height: 150px;
    width: 150px;
    margin: 0 10px 10px; 
}
p {
    outline: 1px dashed gray;
}
.border-radius {
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: 1px solid red;
}
.overflow {
    overflow: hidden;
}
.ui-corners-corner {
    background-color: red;
}
.ui-corners-side {
    background-color: green;
}

/* Default Corners CSS*/
.ui-corners { position: relative; }
.ui-corners-content { position: relative; z-index: 1; }
.ui-corners-corner, .ui-corners-side { position: absolute; z-index: 0; }
.ui-corners-corner { height: 10px; width: 10px; background-repeat: no-repeat; }
.ui-corners-corner-tl { top: 0; left: 0; background-position: left top; }
.ui-corners-corner-tr { top: 0; right: 0; background-position: right top; }
.ui-corners-corner-br { bottom: 0; right: 0; background-position: right bottom; }
.ui-corners-corner-bl { bottom: 0; left: 0; background-position: left bottom; }
.ui-corners-side-top, .ui-corners-side-bottom { left: 10px; right: 10px; height: 10px; background-repeat: repeat-x; }
.ui-corners-side-left, .ui-corners-side-right { top: 10px; bottom: 10px; width: 10px; background-repeat: repeat-y; }
.ui-corners-side-top { top: 0; background-position: left top; }
.ui-corners-side-bottom { bottom: 0; background-position: left bottom; }
.ui-corners-side-left { left: 0; background-position: left top; }
.ui-corners-side-right { right: 0; background-position: right top; }