Apply corner radius / rounded corners to an element's content NOT padding

Question

I have an element that I want to add a corner radius (rounded corners) to, but only on the content itself - NOT the padding. border-radius doesn't seem to have any options that allow this (the name makes sense).

i.e. round the corners of the blue part of the image below, not the green part.

For certain reasons I can't wrap another div around the element to act as the padding.

UPDATE
The context is that the element is a drop area for drag and drop elements. The content (blue area) of the element changes colour when another element is being dragged and hovered over the top of it. I want a large padding so that the drop area is very large, while only the smaller content area changes colour while the hovering occurs.

Do you have a requirement that you can't have a padding of 0? — Jacob P, Jan 29 '20 at 01:40
I've now updated the question to explain this - essentially, I want a large transparent area for the element that is both of the element and surrounds the content of the element. — triangle, Jan 29 '20 at 01:50

Jacob P · Answer 1 · 2020-01-29T01:50:45.023

2

There is no way to apply a border-radius to anything besides the border. Your best shot would be to put a <span> inside of your <div> around your content. Spans are made to be inline with whatever div they are inside of and the span itself should have minimal impact on the styles, and then you could use a border-radius the way you want to.

<div><span class="content">content goes here</span></div>

edited Jan 29 '20 at 01:50

answered Jan 29 '20 at 01:42

Jacob P

148
5

I have added some more context to the original question - I have a feeling that this solution will not apply for this context? – triangle Jan 29 '20 at 01:51
I made a jsfiddle of my example here: https://jsfiddle.net/vjutwacs/. However I put a div around the outside to make it work. Is there a reason this won't work in this situation? – Jacob P Jan 29 '20 at 01:58

score 0 · Answer 2 · answered Jan 29 '20 at 09:33

Play with background. Here is an idea based on this previous answer

.box {
  width:150px;
  height:150px;
  margin:10px;
  border:10px solid yellow;
  padding:10px;
  border-radius:10px; 
  background:
   radial-gradient(farthest-side at bottom right,transparent 98%,green 100%) top left    /25px 25px  content-box,
   radial-gradient(farthest-side at top    right,transparent 98%,green 100%) bottom left /25px 25px  content-box,
   radial-gradient(farthest-side at bottom left ,transparent 98%,green 100%) top right   /25px 25px  content-box,
   radial-gradient(farthest-side at top    left ,transparent 98%,green 100%) bottom right/25px 25px content-box,
   linear-gradient(blue,blue) content-box,
   linear-gradient(green,green) padding-box;
  background-repeat:no-repeat;
}

<div class="box">

</div>

<div class="box" style="padding:50px;">

</div>

The blue is the content area, the green the padding area and the yellow the border.

Apply corner radius / rounded corners to an element's content NOT padding

2 Answers2