CODEWITHSUNDEEP
htmlcsssassrounded-cornerscornerradius
triangle
triangle

Reputation: 11

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

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.

image showing margin, border, padding, content layout of a given element as shown in the layout inspector

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.

Upvotes: 0

Views: 1477

Answers (2)

Temani Afif
Temani Afif

Reputation: 272582

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.

Upvotes: 0

Jacob P
Jacob P

Reputation: 148

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>

Upvotes: 2

Related Questions