CODEWITHSUNDEEP
htmlcss
Mahmoud.Eskandari
Mahmoud.Eskandari

Reputation: 1478

Rounded inside border-radius in css without nested divs

I want to set rounded inside border border-radius ,(not outer border-radius) to my element without nested div's.

My idea is like this picture:

enter image description here

html source on jsfiddle

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #s{
        width:200px;
        height: 200px;
        border:8px solid green ;
        border-radius:8px;
        background-color: red;
        margin:0 auto;
    }
    </style>
</head>
<body>
    <div id="s" >

    </div>
</body>
</html>

Is this possible in css3?

Upvotes: 2

Views: 2887

Answers (2)

Paulie_D
Paulie_D

Reputation: 115099

It's possible to fake this with a couple of extra properties being outline and box-shadow.

CODEPEN DEMO

CSS

#s{
  width:200px;
  height: 200px;
  border-radius:8px;
  background-color: red;
  margin:0 auto;
  outline:8px solid green;
  -webkit-box-shadow:0 0 0 8px green;
}

NB. The outline by itself will leave a gap where the rounded corners are. The box-shadow merely fills in the gap.

Upvotes: 4

drip
drip

Reputation: 12943

You can but it won't be usable I presume, since there is z-index: -1; once there is another background it will go behind it...

#s {
    position: relative;
    width:200px;
    height: 200px;
    border-radius:8px;
    background-color: red;
    margin:0 auto;
}
#s:before {
    content:'';
    z-index: -1;
    background-color: green;
    position: absolute;
    top: -8px;
    left: -8px;
    width: 216px;
    height: 216px;
}

Demo

Upvotes: 5

Related Questions