This question already has answers here:
Placing border inside of div and not on its edge
(15 answers)
Closed 1 year ago.
I am trying to add border which is inside the box, I need to use css after or before for this, how can I achieve this effect?
.box {
width: 100px;
height: 100px;
background: red;
}
<div class="box"></div>
There's a lot of different ways you can achieve this effect, each with their own pros and cons (including how different properties affect document flow):
Outline with negative offset
.box {
width: 100px;
height: 100px;
background-color: red;
outline: 2px solid darkred;
outline-offset: -7px;
}
<div class="box"></div>
Border and boxshadow
.box {
width: 100px;
height: 100px;
border: 2px solid darkred;
background-color: red;
box-shadow: 0 0 0 5px red;
}
<div class="box"></div>
::after
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.box::after {
content: '';
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 2px solid darkred;
}
<div class="box"></div>
Related
This question already has an answer here:
How to do an inset border with a border radius on an image
(1 answer)
Closed 1 year ago.
I am trying to get a white border within the photo. Currently I have tried everything and come closest to the intended result with outline, only it is not possible to round it off.
Anyone have a solution for this?
It's about the fine white line, which would only need to be rounded off.
Code:
img {
outline: 1px solid white;
outline-offset: -10px;
}
Use a pseudo-element on top of your image.
img {
height: 75vh;
width: auto;
border-radius: 1rem;
display: block;
z-index: -1;
position: relative;
}
div {
display: inline-block;
margin: 1em;
position: relative;
}
div:after {
content: "";
position: absolute;
inset: 5px;
border: 2px solid white;
border-radius: 14px;
}
<div>
<img src="https://images.unsplash.com/photo-1625516838246-ff33acad73ec?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODAwMTMzNQ&ixlib=rb-1.2.1&q=85" alt="">
</div>
You can use two div blocks. External - as a container, with background image (or with img tag), and internal for line. It's a little bit verbose way, but very flexible
.external {
width: 100px;
height: 100px;
background-image: url('https://picsum.photos/536/354');
background-size: cover;
text-align: center;
position: relative;
border: 1px black solid;
border-radius: 15px;
}
.internal {
border-radius: 5px;
border: 1px red solid;
width: calc(90% - 2px);
height: calc(90% - 2px);
position: absolute;
top: 5%;
left: 5%;
}
<div class="external">
<div class="internal"></div>
</div>
This question already has answers here:
Circle with two borders
(4 answers)
How to create multiple borders around existing border of circle [duplicate]
(2 answers)
Closed 3 years ago.
I am creating a circle with CSS, I would like to have a gap between the border of the circle and the background color so that you can see through to the background. Is this possible?
.container {
background:url('https://picsum.photos/536/354');
}
.circle {
width:50px;
height:50px;
border-radius:50px;
border:1px solid red;
background:red;
}
<div class="container">
<div class="circle"></div>
</div>
Desired result:
You can achieve that with a pseudo element (.circle::after) and the following (or similar) settings:
.container {
height: 100px;
background: url('https://picsum.photos/536/354');
}
.circle {
top: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
position: relative;
box-sizing: border-box;
}
.circle::after {
content: '';
position: absolute;
box-sizing: border-box;
border: 3px solid red;
border-radius: 50%;
width: calc(100% + 16px);
height: calc(100% + 16px);
left: -8px;
top: -8px;
}
<div class="container">
<div class="circle"></div>
</div>
You can use pseudo element (:before for example) to add a transparent "layer" with border. Use translate to place it in more generic way (so if you'll change the size of it, it will be in the right place).
Like this:
.container {
background: url('https://picsum.photos/536/354');
}
.circle {
position: relative;
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid red;
background: red;
}
.circle:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 10px);
height: calc(100% + 10px);
transform: translate(-50%, -50%);
border: 1px solid red;
content: "";
border-radius: 50%;
}
<div class="container">
<div class="circle"></div>
</div>
not that straight forward but with one element:
.container {
background: url('https://picsum.photos/536/354');
}
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
border: 4px solid red;
position: relative;
}
.circle::after {
content: '';
display: block;
width: 42px;
height: 42px;
background: red;
position: absolute;
border-radius: 50%;
top: 4px;
left: 4px;
}
<div class="container">
<div class="circle"></div>
</div>
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 2 years ago.
I'm trying to create a border on a div with two different color on the top left and the bottom right.
Can't find solution, with images or directly on css.
Please refer the below example.
You can use position set toabsolute for the two red sections and they can be positioned with respect to the div with class box, which has its position set to relative.
.box {
background-color: gray;
height: 400px;
width: 400px;
position: relative;
}
.top-left {
position: absolute;
top: 10px;
left: 10px;
border-left: 10px solid darkblue;
border-top: 10px solid darkblue;
height: 30px;
width: 30px;
}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
border-bottom: 10px solid red;
border-right: 10px solid red;
height: 30px;
width: 30px;
}
<div class="box">
<div class="top-left"></div>
<div class="bottom-right"></div>
</div>
You can follow the example of Naren Murali or you can create pseudo-elements, so you do not need as much HTML.
I created two pseudo-elements :before and :after
:before
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
:after
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background: grey;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left: 5px;
border-top: 5px solid blue;
border-left: 5px solid blue;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
right: 5px;
border-bottom: 5px solid red;
border-right: 5px solid red;
}
<div></div>
No need extra elements or pseudo elements, you can do easily with multiple background:
.box {
height: 200px;
width: 400px;
background:
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 0 0,
linear-gradient(blue,blue) 100% 100%,
linear-gradient(blue,blue) 100% 100%,
#ccc;
padding:5px;
background-size:80px 20px,20px 80px;
background-origin:content-box;
background-repeat:no-repeat;
}
<div class="box">
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I have some divs inside a main div, but I have looked every questions similar to this and I have tried many things but I couldn't center them horizontally. I could only make them on the other side but not the center.
.ground {
width: 390px;
height: 575px;
border: 1px solid white;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
Here is the jsfiddle demo
You can see those 5 circles are the ones I need to center them inside the main div ground.
In your case, the simplest way to do this would be to set the display of the .line element to inline-block so that it has a "shrink-to-fit" width. In doing so, it will have the same width as its children elements. Then add text-align: center to the parent element to center the inline child element:
Updated Example
.ground {
text-align: center;
}
.ground .line {
display: inline-block;
}
See this answer for a few alternatives.
You can make use of flexbox centering. display: flex and justify-content: center on the parent element will center the circles.
JSfiddle Demo
.ground {
width: 390px;
height: 575px;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAxgDGAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD49bqCD1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//Z);
border: 1px solid white;
display: flex;
justify-content: center;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
<div class="ground">
<div class="line">
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
</div>
</div>
Is there a way how to use css (ideal) to draw element border but just a part of the line (in the image below left and right border)?
Yes, you can, like this, and even IE8 can do this:
div {
position: relative;
width: 100px;
padding: 10px;
}
div:before {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
border: 1px solid black;
border-top-width: 0;
}
<div>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
Please try this:
.box {
position: relative;
min-height: 100px;
padding-bottom: 10px;
}
.box .text {
margin: 10px;
}
.box .bordered {
position: absolute;
bottom: 0;
height: 30%;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
z-index: 1000;
}
<div class="box">
<div class="text">Hell world!</div>
<div class="bordered"></div>
</div>
see the fiddle here: https://jsfiddle.net/42zgo5aa/3/
This is my improvements on John's answer.
I just fiddled with negative margins to make the border come up and wrap the container a bit.
.box {
position: relative;
min-height: 100px;
padding: 0 15px;
padding-bottom: 10px;
}
.box .bordered {
position: absolute;
height: 20px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
margin: -10px;
z-index: 1000;
}
<div class="box">
Hello world!
<br/>You are beautiful!
<div class="bordered"></div>
</div>
I'm sure there's no (regular) way to do this in CSS 2.1, and I'm not aware that CSS 3 supports this either. You may be able to do some trickery like creating a separate element behind the text, that is less high and has just a left, right, and bottom border. But that's not a solution one really wants to go for, of course.