Inset Border-Radius With Css3

Inset border-radius with CSS3

The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.

Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradient even up through IE9).

CSS inset border radius with solid border

the demo:
Jsfiddle here

Code

figure {
  position: relative;
  width: 200px;
  height: 120px;
  margin: 100px auto;
  overflow: hidden;
  border: 1px solid black;
  border-right: none;
  border-bottom: none;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

figure:before,
figure:after {
  content: '';
  position: absolute;
}

figure:before {
  right: -50%;
  top: 0;
  background: transparent;
  width: 172px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100%;
  box-shadow: 0 0 0 100em red;
}

figure:after {
  left: -1px;
  bottom: 0px;
  height: 16px;
  width: 128px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 5px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

<figure></figure>

How to do an inset border with a border radius on an image

Use an extra div and consider pseudo element:

.img {
  border-radius: 16px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.img:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 3px solid #fece40;
  inset: 16px;
}

img {
  display: block;
}

<div class="img"><img src="https://picsum.photos/id/237/200/200"></div>

Inset border-radius for an image

One way:

<div class="container">
    <div class="dot1"></div>
       <div class="dot2"></div>
      <div class="dot3"></div>
       <div class="dot4"></div>
    <img src='http://placehold.it/400x300'>
</div>

CSS:

.container {
    position:relative;
    margin:50px auto;
    width:400px;
}
.dot1 {
    background-color:white;
    width:50px;
    height:50px;
    border-radius:100%;
    position:absolute;
    left:-25px;
    top:-25px;
}
.dot2 {
    background-color:white;
    width:50px;
    height:50px;
    border-radius:100%;
    position:absolute;
    right:-25px;
    top:-25px;
}
.dot3 {
 background-color:white;
    width:50px;
    height:50px;
    border-radius:100%;
    position:absolute;
    right:-25px;
    bottom:-25px;
}

.dot4 {
 background-color:white;
    width:50px;
    height:50px;
    border-radius:100%;
    position:absolute;
    left:-25px;
    bottom:-25px;
}

Demo: http://jsfiddle.net/ofejxfj6/

You can tweak it a little (size of circles/dots and dimensions), but it is pretty close, IMHO.

How do I achieve a thick border with inner border radius only

the simple way: you can have 2 dives 

<div class="a">
   <div class="b">
   </div>
</div>

.b{
    display: block;
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 5px;
}
 .a{
    border: 15px solid;
    width: auto;
    height: auto;
    display: inline-block;
    background-color: black;
}

Inset border-radius shape in CSS?

I have created a little something. There is probably a better solution, but maybe this helps.

jsFiddle

CSS:

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,
.bubble .white,
.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML:

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>

Element with border-radius inside element with border-radius is not consistent

You can use inset box-shadow instead of border.

.parent {
  /*border: 3px solid tomato;*/
  background-color: white;
  height: 200px;
  border-radius: 30px;
  box-shadow: inset 0px 0px 0 3px tomato;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

How to make border with inside-radius?

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>

CSS - border radius and solid border curved inside

you can use border-radius values as twice the border-size value to obtain inside-rounded corners.

-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;

border:white solid 8px;

Inset Border-Radius With Css3