0
border: 15px solid $card-border;

I want the outer border radius to be none, and the inner border radius to have a value (be rounded on the inside only). How do I achieve that?

sohinim98
  • 82
  • 2
  • 11

4 Answers4

1
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;
}
eli
  • 162
  • 7
  • This is what I ended up doing as well! Thanks :) Was looking for a solution with border properties, but there doesn't seem to be one. – sohinim98 Feb 06 '20 at 23:09
0

As far as I have understood :

border: 1px double #000;
border-radius: 20px;
outline: none;
outline-offset: 0px;

Here border represent the inner border and border-radius decides the roundness of the border. Eventhough I haven't understood why you want to mention a outer border that's none, you could still do it by mentioning outline to none.

In case you want to put both the border and adjust the spacing you can use outline-offset to adjust the required spacing.

Hope that helpss.. !!

Nithin Suresh
  • 360
  • 1
  • 7
  • This is not what I am looking for. I want a border of 15px (`border: 15px solid $card-border;`) which has sharp (perpendicular) outer edges but rounded inner edges. Your answers causes both the outer edge and the inner edge to become round. – sohinim98 Feb 06 '20 at 22:50
0

Try giving your element box-sizing: border-box

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Lazaro Gamio
  • 759
  • 1
  • 6
  • 11
-2

For the outter element do nothing because the default behavior of border-radius property is 0 and for the inner one 

Your element selector { 
            border-radius: the value you want px
}
mohamed ibrahim
  • 567
  • 4
  • 12