This question already has answers here:
How to make CSS3 rounded corners hide overflow in Chrome/Opera
(12 answers)
Should border-radius clip the content?
(6 answers)
Closed 2 years ago.
How do I make border-radius in radio buttons?
How do I apply border-radius to the box class?
.box {
width: 300px;
height: 60px;
background: red;
display: flex;
align-items: center;
border-radius: 50px;
}
.item {
width: 100%;
height: 100%;
background: #000;
display: flex;
color: red;
justify-content: center;
align-items: center;
}
.item_active {
background: gray;
}
<div class="box">
<div class="item_active item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
I set it to 50px, but for some reason it doesn't work.
you need to add overflow hidden to .box class, so that the border radius cuts the underlaying content.
.box {
width: 300px;
height: 60px;
background: red;
display: flex;
align-items: center;
border-radius: 50px;
overflow: hidden;
}
.item {
width: 100%;
height: 100%;
background: #000;
display: flex;
color: red;
justify-content: center;
align-items: center;
}
.item_active {
background: gray;
}
<div class="box">
<div class="item_active item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Related
This question already has answers here:
Border radius circle
(6 answers)
how to put img inside circle in html and css?
(4 answers)
Closed 12 months ago.
Need to draw circle onto which I place image icon like this by applying CSS as shown in image below. Tried the code but unable to accomplish it. Please help.
Required:
HTML:
.dot {
height: 505px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
i have create as you want. please check. if this helpful please hit the green check. thanks
.dot {
height: 200px;
width: 200px;
background-color: #fff;
border-radius: 50%;
border: 5px solid grey;
display: inline-block;
text-align:center;
}
.dot h3 {
font-size: 23px;
margin:0;
}
.dot-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
.dot2 {
display: table;
}
.dot-box2 {
display: table-cell;
vertical-align: middle;
}
<h2>
Circle With Flex
</h2>
<div class="dot">
<div class="dot-box">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
<h3>
MEMBER FEATURE
</h3>
</div>
</div>
<br>
<h2>
Circle With Table
</h2>
<div class="dot dot2">
<div class="dot-box2">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
<h3>
MEMBER FEATURE
</h3>
</div>
</div>
Make the width and height the same
.dot {
height: 50px;
width: 50px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
For A Circle, Height and Width should be same.
.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
// Below Code is For Placing content in the Center of Circle
display: flex;
flex-direction:column;
justify-content: center;
align-items:center;
}
<div class="dot">
<div class="content">
<h1>Round Dots / Circles</h1>
</div>
</div>
Height should be same as width.
.dot {
height: 505px;
width: 505px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
Here is the code pen link:
https://codepen.io/wahabshah/pen/YzELexr
.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
border: 5px solid grey;
display: inline-block;
}
Also for inside content use display : flex and use column for displaying them vertically.
Height and width must be equal to form a circle and border-radius of 50%
[![Red: Centered on canvas: Black: Centered between center and top of canvas][1]][1]
Using flex, it is easy to position elements in the center of a div. But how can this be done relative to already centered elements, using flex?
Shown below in the code is the best I've come up so far. I am able to center the red square in the middle but cannot get the blue one above it to be vertically center-aligned between the red square and the top border.
.flex {
border-style: solid;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
height: 100vh
}
.square {
height: 10px;
width: 10px;
}
#square1 {
background-color: blue;
}
#square2 {
background-color: red;
}
.flexdivider {
display: flex;
flex-direction: column
justify-content: center;
align-items: center;
flex: 1;
}
p {
color: white;
}
<body>
<div class="flex">
<div class="flexdivider">
<div class="square" id="square1"></div>
</div>
<div class="flexdivider">
<div class="square" id="square2"></div>
</div>
<div class="flexdivider">
</div>
</div>
</div>
</body>
[1]: https://i.stack.imgur.com/4lUop.png
I have created 2 separated approach.
h2{
color: #333;
}
.box,.fakebox{
width: 30px;
height: 30px;
background-color: red;
}
/* Example #1 */
.container-box-1{
background-color: #eee;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.fakebox{
opacity: 0;
}
.box2{
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%,-50%)
}
<h2>Example #1 (Using Display Flex and position absolute)</h2>
<div class="container-box-1">
<div class="box"></div>
<div class="box box2"></div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
CSS
.as {
width: 300px;
height: 300px;
border: 5px solid red;
position: absolute;
left: 25%;
display: flex;
flex-direction: column;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}
HTML
$div class="as"$
$div class="ab"$123$/div$
$div class="cd"$123$/div$
$/div$
When I run it, I have green and blue boxes in a big red box. The green and blue are on the left corner.
since the parent container, which is "as" has display: flex and flex-direction: column
I can't go to the left bottom corner.
Is there a way to go to the left bottom? besides make it position: relative and bottom: %.
Thank you
Hi, I am practicing CSS
Do you need use property the justify-content with value flex-end to the left bottom corner
Look this example bellow
.as {
width: 300px;
height: 300px;
border: 5px solid red;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.bottom-left {
justify-content: flex-end;
}
.bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}
<p>Bottom left</p>
<div class="as bottom-left">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
<p>Bottom right</p>
<div class="as bottom-right">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
This question already has answers here:
Setting linear gradient height AND width
(2 answers)
Gradient that stops at a particular height and continues further with a solid color
(9 answers)
Closed 2 years ago.
Assuming I have a UI card:
.card {
flex-direction: column;
height: 20rem;
width: 14rem;
border-width: 1px;
border-radius: 0.375rem;
border-color: #444;
border-style: solid;
margin: 1.25rem;
}
.card-header {
display: flex;
justify-content: center;
}
.card-center {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="card">
<div class="card-header">
<span>header</span>
</div>
<div class="card-center">
<span>center</span>
</div>
</div>
https://jsfiddle.net/2wouyex4/
My question is, how can I achieve this effect:
I need that blue gradient to have height/width so I can manipulate it in javascript (higher height depending on input).
How can I achieve this?
Since you want to control size with scripting I'd probably use a pseudo-element. You can then update position rules as you see fit. The border could be part of the gradient, but I've added it as a separate rule.
.card {
position: relative;
flex-direction: column;
height: 20rem;
width: 14rem;
border-width: 1px;
border-radius: 0.375rem;
border-color: #444;
border-style: solid;
margin: 1.25rem;
}
.card:before {
position: absolute;
content: '';
left: 0;
top: 20%;
bottom: 0;
width: 100%;
border-top: 3px solid pink;
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,
rgba(125,185,232,0) 100%);
}
.card-header {
display: flex;
justify-content: center;
}
.card-center {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="card">
<div class="card-header">
<span>header</span>
</div>
<div class="card-center">
<span>center</span>
</div>
</div>
This question already has answers here:
How does the vertical-align property work?
(2 answers)
Closed 2 years ago.
I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.
The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.
#wrapper {
width: 1000px;
height: 1000px;
}
#container {
width: 900px;
height: 900px;
text-align: center;
display: inline-block;
background-color: lightblue;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
}
<div id="wrapper">
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</div>
I think you are looking for flexbox.
I have adapted your jsfiddle to fit
https://jsfiddle.net/ke4w58ra/
The folowing code is what I have changed to your #content element.
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.
For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Below is the integrated form of the JSFiddle
#container{
width: 100vw;
height: 100vh;
text-align: center;
display: inline-block;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0px;
}
<body>
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</body>