You can style a div with an inner border inside another div using the CSS border property. Here’s an example of how to do this:

HTML:

<div class="outer">
    <div class="inner">
        Inner content
    </div>
</div>

CSS:

/* outer div */
.outer {
    border: 1px solid black; /* add border to outer div */
    padding: 10px; /* add padding to outer div */
}
/* inner div */
.outer .inner {
    border: 1px solid red; /* add border to inner div */
    padding: 10px; /* add padding to inner div */
}

This will create a div with a class of “outer” and another div with a class of “inner” inside it. The outer div will have a black solid border of 1px width and 10px of padding. The inner div will have a red solid border of 1px width and 10px of padding.

In the CSS, the outer div is selected with .outer class and the inner div is selected with .outer .inner selector, this way we select the inner div inside the outer div.

You can adjust the values of the border and padding properties to achieve the desired look. For example, you can change the border style to dotted, or change the border width to make it thicker or thinner.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

, ,