I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
border: dashed/dotted;
is not working in Firefox, it renders as solid anyway (when border-radius is applied).