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>
Related
In my project, I allow users to upload profile pictures. I want these pictures to have a circular border, like instagram profile pictures do. Does anybody know how to add this affect?
I have tried the border-radius property, however this makes some images with white/transparent backgrounds looking like they have been cropped, and doesn't have the expected outcome.
Does anybody know how to add a circular type border to any image that is upload by a user? Thank you.
HTML CODE:
.fixedImage {
position: relative;
left: 70px;
width: 25px;
top: 50px;
height: 25px;
border-radius: 50%;
}
Use a border and a box-shadow...
div {
text-align: center;
display: inline-block;
padding: 2em 3em;
border: 1px solid lightgrey;
background: lightgreen;
}
img {
display: block;
border-radius: 50%;
border: 5px solid transparent;
box-shadow: 0 0 0 5px red;
}
.white {
border-color: white;
}
<div>
Transparent border
<img src="http://www.fillmurray.com/g/150/150" alt="">
</div>
<div>
White border
<img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>
Instead of img, you can use div and have your image in background. This will allow you to add a background color of your choice to avoid the transparency.
Example:
<div class="fixedImage" style="background-image: url(img.png)"></div>
CSS:
.fixedImage {
position: relative;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-size: 100px 100px;
}
I think https://medium.com/#biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3 is what you are looking for.
A div around the image gets the border-radius: 50%
HTML:
<div class="image-cropper">
<img src="https://www4.lunapic.com/editor/premade/transparent.gif">
</div>
CSS:
img {
height: 200px;
width: 200px;
padding: 20px;
}
.image-cropper {
width: 240px; // it seems you need to add the padding twice here
border-radius: 50%;
border: 1px solid red;
position: relative;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/bdL8zmu1/
Without background color:
https://jsfiddle.net/94z27bdL/
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>
Does anyone have any pointers on how I can achieve the following 2 effects (red color) using pure CSS?
I am not asking for entire code but if anybody can guide me in proper direction, that would really be great.
Thanks in advance.
For second effect you should create for image's container two pseudo-elements :before and :after with border-radius set to desired value. Element :before you should position to left bottom side of container and the element :after you should position to right bottom side. You should also specify widths for each pseudo-element (for example: 50% and 50%, 60% and 40% etc.).
Code for the second effect:
.image {
position: relative;
width: 350px;
}
img {
display: block;
padding: 0;
margin: 0;
}
.image:before {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 30%;
height: 120px;
position: absolute;
bottom: 0;
left: 0;
border-top-right-radius: 15px;
}
.image:after {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 70%;
height: 120px;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 15px;
}
<div class="image">
<img src="http://placehold.it/350x350">
</div>
OK, here is a suggestion for the proper direction.
The lower red panel looks to me like two adjoining rectangles. You need to set the widths appropriately, and then for each rectangle round off one corner using border-radius: a b c d.
The effect looks to me like two of effect number 2. The red one, and then the same in white, possibly with a z-index to make sure that it (partly) covers the other one.
I trust you already know how to make the red translucent, either by using opacity or setting the colour using rgba.
I hope that helps.
You have to use the pseudo elements :after & :before to achieve the bulge in the otherwise straight div.
You may try something like this:
div {
height: 30px;
width: 200px;
background-color: red;
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
right: 0;
width: 0px;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
margin: auto;
}
div:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
width: 0px;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 10px solid red;
margin: auto;
}
<div></div>
Since you didn't provide a fiddle so use below solution as a guide. CSS will produces curved edges that you join together to produce desired results.
div.arrow-curved {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div.arrow-curved:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
For more reference for CSS shapes: https://css-tricks.com/examples/ShapesOfCSS/
I am trying to create an offset border effect. Can this be done with pure css.
These are buttons so will be different sizes and colours.
I use pseudo-element :after to create offset border effect.
body {
background: black;
padding: 30px;
}
div {
background: white;
height: 75px;
width: 175px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div></div>
Update
As web-tiki pointed out in comments on this answer, you can achieve the entire affect entirely with box-shadow. Take a look at their JSFiddle demo here: https://jsfiddle.net/5a0bvyup.
I'm going to leave my answer in the state I submitted it in because it does give some idea of how their implementation works (and if you look closely you'll see how their box-shadow differs from the one described below).
Note: In my answer I've made the foreground box red instead of white to demonstrate that this 'offset border' does not overlap the initial element. You'll need to change this back to white yourself.
The Left and Bottom Borders
You can achieve the left and bottom borders really easily with box-shadow. You simply need to create a solid shadow which matches the background colour, and then behind that add a second shadow which matches the foreground colour, offset by one pixel:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
}
<div></div>
The Top and Right Borders
You can then use pseudo-elements (::before and ::after) to fill in those extra borders:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
position: relative;
}
div::before {
background: white;
content: '';
position: absolute;
height: 1px;
width: 7px;
top: 6px;
right: 100%;
}
div::after {
background: white;
content: '';
position: absolute;
height: 7px;
width: 1px;
top: 100%;
right: 6px;
}
<div></div>
I'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>