Skip to content

Instantly share code, notes, and snippets.

@nola
Forked from keeganbrown/cornerBlackOutside.png
Created August 8, 2013 14:42
Show Gist options
  • Save nola/6185189 to your computer and use it in GitHub Desktop.
Save nola/6185189 to your computer and use it in GitHub Desktop.
<div class="roundcorners">
<div class="subContent">*** add your content here ***</div>
<span class="roundcorner rcLeft rcTop insideW">&nbsp;</span> <span class="roundcorner rcLeft rcBottom outsideW">&nbsp;</span> <span class="roundcorner rcRight rcTop insideW">&nbsp;</span> <span class="roundcorner rcRight rcBottom outsideW">&nbsp;</span>
</div>
/* ROUNDED CORNER STYLES */
.roundcorners { position: relative; top: 0; left: 0; }
.oldIE .roundcorners { overflow: visible; }
.roundcornersInnerWrap { position: relative; top: 0; left: 0; }
.roundcorners .insideW { background-image:url("./cornerWhiteInside.png"); }
.roundcorners .outsideW { background-image:url("./cornerWhiteOutside.png"); }
.roundcorners .outsideWNoBdr { background-image:url("./cornerWhiteOutsideNoBdr.png"); }
.roundcorners .outsideB { background-image:url("./cornerBlackOutside.png"); }
.roundcorners .roundcorner { position: absolute; z-index: 1000; display: block; height: 10px; width:10px; }
.roundcorners .rcLeft.rcTop { left: 0; right: auto; top: 0; bottom: auto; background-position: left top; }
.roundcorners .rcRight.rcTop { left: auto; right: 0; top: 0; bottom: auto; background-position: right top; }
.roundcorners .rcLeft.rcBottom { left: 0; right: auto; top: auto; bottom: 0; background-position: left bottom; }
.roundcorners .rcRight.rcBottom { left: auto; right: 0; top: auto; bottom: 0; background-position: right bottom; }
.rcHasBdr .rcLeft.rcTop { left: -1px; right: auto; top: -1px; bottom: auto; background-position: left top; }
.rcHasBdr .rcRight.rcTop { left: auto; right: -1px; top: -1px; bottom: auto; background-position: right top; }
.rcHasBdr .rcLeft.rcBottom { left: -1px; right: auto; top: auto; bottom: -1px; background-position: left bottom; }
.rcHasBdr .rcRight.rcBottom { left: auto; right: -1px; top: auto; bottom: -1px; background-position: right bottom; }
@media screen and ( min-width: 100px ) {
body .roundcorners { border-radius: 8px; -webkit-background-clip: border-box; -moz-background-clip: border-box; -ms-background-clip: border-box; background-clip: border-box; }
body .roundtopcorners { border-radius: 8px 8px 0 0; }
body .roundbtmcorners { border-radius: 0 0 8px 8px; }
body .roundcorners .roundcorner { display: none; }
}
body .forceimagerounded .roundtopcorners { border-radius: 0; }
body .forceimagerounded .roundbtmcorners { border-radius: 0; }
body .forceimagerounded .roundcorner { display: block; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment