I have a regular <div> element currently styled to look like a plain rectangle with rounded edges like this:
Is there a way to style it with just CSS (without adding any additional html elements to it) to make it look like this with a 'brace' on each end of the bar:
Here's a small cut out from my code of what I have at the moment:
.rectangle {
width: 400px;
background-color: grey;
border-radius: 4px;
}
<div class='rectangle'> </div>
You might use border:
.brace {
width: 400px; height:20px;
background-color: grey;
border:solid 10px;
border-color: #0000 #0000 #fff;
border-radius: 4px;
}
<div class="brace"></div>
You'd have to play around a bit with the settings below to get the precise size/shape you need, but you can do it by using a pseudo element, similar to the snippet below.
The :after rule creates an additional element which overlaps the main element.
.rectangle {
position: relative;
width: 400px;
background-color: grey;
height: 40px;
border-radius: 4px;
}
.rectangle:after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 380px;
height: 10px;
background-color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
<div class='rectangle'> </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>
I have a container with a child element in it. The container has a border radius of 0.3rem. My child element has a border as well. I would like my child's border to round at the same radius as the parent, but I can't seem to do it. My first approach was to just have the child match the parent's radius of 0.3rem but for some reason (even though the computed font size on both elements are the same) the borders don't line up perfectly:
My second approach was to use the commonly suggested overflow: hidden style on the parent container. Doing this without the child matching the parent's border radius does make the entire button perfectly follow the outline of the parent container, but now the child's border looks "cut off" in the corner:
Is there any way I can both follow the parent container's curve while keeping a matching border curve on the child element?
The border-radius of the inner element is the padding edge radius of the outer element, and
The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.
—CSS Backgrounds and Borders Module Level 3, § 5.2. Corner Shaping
div {
border-radius: 1rem;
border-width: 5px;
}
span {
border-radius: 0 0 calc(1rem - 5px) calc(1rem - 5px);
border-width: 3px;
}
/* the rest is positioning and colors */
div {
position: absolute;
top: 2rem;
bottom: 2rem;
left: 2rem;
right: 2rem;
border-color: grey;
border-style: solid;
}
span {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5rem;
border-color: #33f;
border-style: solid;
}
<div><span></span></div>
Unfortunately, no, there is no easy way to match border radius of nested objects. If you try to simply match, you'll end up with something like this (notice the sliver or white between the red and blue):
div {
display: inline-block;
border: 2px solid blue;
border-radius: 10px;
}
span {
display: block;
background: red;
height: 100px;
width: 100px;
border-radius: inherit;
}
<div>
<span></span>
</div>
In terms of the shape you're trying to draw, it's probably best to go along this (syntactically ugly) route:
body {
background: aliceblue;
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
div > span:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
div > span:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: red;
border-color: blue;
border-style: solid;
}
span {
display: block;
height: 40px;
width: 80px;
background: white;
border-width: 2px;
}
<div>
<span></span>
<span></span>
<span></span>
</div>
Essentially, any time you're trying to match two curves of nested objects, it comes out nicer if you flatten the drawing logic. It's a hassle, but that's the best I've found for really solid results. You will have to use border-box to make it so objects are sized by the outside of their border rather than inside of it (content size... it's lame).
Your issue is that the parent div has a border around it. It looks like this is being done to offset it from the content below, similar to a drop-shadow.
div {
border-radius: 1rem;
box-sizing: border-box;
}
.outer {
width: 100px;
height: 100px;
background: lightgrey;
border: 3px solid black;
}
.inner {
width: calc(100px - 6px);
height: calc(50px - 6px);
position: relative;
top: 50px;
left: 0px;
background: red;
border-top-left-radius: unset;
border-top-right-radius: unset;
border: 3px solid blue;
}
<div class="outer">
<div class="inner"></div>
</div>
There are a couple ways you can solve this. You can make sure that the child element overlays the outer element, that way their borders and radiuses are the same. Your other option is to remove the border from the parent container.
div {
border-radius: 1rem;
box-sizing: border-box;
display: inline-block
}
.outer {
width: 100px;
height: 100px;
margin-left: 5px;
background: lightgrey;
border: 3px solid black;
}
.inner {
width: 100px;
height: 50px;
position: relative;
top: 50px;
left: -3px;
background: red;
border-top-left-radius: unset;
border-top-right-radius: unset;
border: 3px solid blue;
}
.outer2 {
border: none;
}
.inner2 {
width: 100px;
left: 0px;
height: 50px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="outer outer2">
<div class="inner inner2"></div>
</div>
Dealing with these types of issues are always simpler when using box-sizing: border-box, but they're possible with content-box if you don't mind doing a little more math.
You can play around with it a little easier using this jsfiddle.
Set
border-radius: inherit;
to the inside element
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>
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>
How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/