Smart Way to Add Corner Image to Div Border on All Four Corners

Smart way to add corner image to DIV border on all four corners

For a solution that's widely compatible, I think you should use four elements with position: absolute combined with position: relative and negative offsets:

See: http://jsfiddle.net/M4TC5/

@meo's demo using transform: http://jsfiddle.net/M4TC5/2/

(and my demo: http://jsfiddle.net/M4TC5/1/)

That really just shows the concept, you can generate better transform code (that doesn't look slightly "off" in IE) with this tool: http://www.useragentman.com/IETransformsTranslator/

HTML:

<div class="image">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <img src="???" />
</div>

CSS:

.image {
    position: relative
}
.corner {
    position: absolute;
    background: url(???);
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}

Trimming image corners with border-radius set on parent div doesn't work in Safari

The best way around this is by specifying overflow: hidden; on the parent element.

How to place an image outer of a div but on the right side

Try this one.

<div class="container">
    a lot of content
    <div class="outter"></div>
</div>
<style>
    .container{position:relative}
    .outter{
        position:absolute;
        right:-10px;
        bottom:0;
        height:200px;
        width:10px;
        background:url(some.png) no-repeat
    }
</style>

Placing an image to the top right corner - CSS

You can just do it like this:

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon" alt="" />
    <div>some text...</div>
</div>

How to round corners of images?

I managed to get it to work by using the following code

p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}

I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.

Hope this is what you are after.

Thanks

How to place a img in the right bottom corner of a div

There are a couple of techniques of doing this. The simplest:

<div class="outer">
<img src="....">
</div>

with

div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }

Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.

Start with Making the absolute, relative.

If the image is 10 pixels high, for example, you could try this:

div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }

Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.

Sharp corner curved background image

How about this approach?
JSBin

body {

  background: white;

  margin: 0;

}

.main-header {

  background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;

  background-position: center;

 background-size: cover;

  min-height: 480px;

  position: relative;

}

.main-header::after {

  content: '';

  display: block;

  position: absolute;

  background: transparent;

  /* You can play around with these numbers to adjust the curve */

  bottom: -4rem;

  left: -25%;

  width: 150%;

  height: 400px;

  border-bottom: solid 4rem white;

  border-radius: 0 0 50% 50%;

}

<div class="main-header">

<br>

</div>

Border radius issue with div

Your issue is overflow: scroll;. Remove overflow: ?; property from .stage-area. With border-radius overflow: scroll; will not work together it should be hidden or inherit. Below the snippet.

.stage-area {
  width: 50%;
  background: #ffffff;
  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 60%;
  /*overflow: scroll;*/
}

.stage-area {

  width: 50%;

  background: #ffffff;

  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);

  border-radius: 80px;

  -webkit-border-radius: 80px;

  -moz-border-radius: 80px;

  display: flex;

  flex-direction: column;

  align-items: center;

  max-height: 60%;

  /*overflow: scroll;*/

}

body {

  height: 100%;

  margin: 0px;

  background-color: #ffce31;

}

.brand-icon {

  padding: 0 10% 0 10%;

}

.outer-yellow-area {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  height: 100%;

}

<div className="outer-yellow-area">

        <img className="brand-icon" src={brandIcon} alt="logo" />

        <div class="stage-area">

        Center stage

        <div>below stage</div>

        <div>below stage</div>

        <div>below stage</div>

        <div>below stage</div>

        <div>below stage</div>

        <div>below stage</div>

        <div>below stage</div>

        </div>

      </div>

---

Related Topics