0

I'm trying to create a div with inside circle at the corner. It should look like the picture shown below

https://habrastorage.org/files/01b/7bb/9cd/01b7bb9cd03e493c8a6cd16c5c904fa6.jpg

Can someone help to solve this problem?

G.L.P
  • 7,119
  • 5
  • 25
  • 41
Mikhail Mustakimov
  • 3
  • 3
  • Not sure if this is solvable with css only. Have a look at this jquery plugin: http://malsup.com/jquery/corner/ – oshell Jun 01 '15 at 11:54
  • If you need a `CSS` only solution, you can do something like this... http://jsfiddle.net/gmolop/1aragjcf/ – gmo Jun 01 '15 at 12:32

1 Answers1

1

You could do this:

.box {
  width: 200px;
  height: 200px;
  background:
    radial-gradient(circle at 0 100%, transparent 14px, red 15px) bottom left,
    radial-gradient(circle at 100% 100%, transparent 14px, red 15px) bottom right,
    radial-gradient(circle at 100% 0, transparent 14px, red 15px) top right,
    radial-gradient(circle at 0 0, transparent 14px, red 15px) top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
<div class="box"></div>

More info: Inset border-radius with CSS3

BUT (!) if you need more complexity on the shapes of that border, you could use a background image or a border image:

.box{
  width: 200px;
  height: 200px;
  background: #EEE;
  border: 30px solid transparent;
  border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}
<div class="box"></div>

More info: Decorative border css

Community
  • 1
  • 1
Vandervals
  • 5,774
  • 6
  • 48
  • 94
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Cyril Durand Jun 01 '15 at 12:57
  • Thanks for the advice, it makes perfectly good sense, although sometimes I can't think on a way of answering by referencing 2 or more posts and not copying their answers. – Vandervals Jun 01 '15 at 13:25