I'm looking to do more rounded corners in CSS to have a result like this :
Currently, I have this code:
border-radius: 0 400px 0 0;
which results in:
The second value doesn't change the corner even if I put 50px or 1000px.
Is there a way to have a similar border radius?
You would need to elongate your border-radius:
.test {
border: 1px solid black;
text-align:center;
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 50px 20px;
}
<div class="test">
lorem ipsum
</div>
More information
Here another way to do.
.card {
max-width: 100px;
height: 20px;
margin: 10px;
background-color: green;
border-radius: 150px 100px/75px 0px 0px;
}
<div class="card "></div>
Related
This question already has answers here:
How do I make corners rounded only on the top part of the border in css? [closed]
(3 answers)
Closed 1 year ago.
I have a little img card and i need to make its top corners have border-radius but when i apply it all corners become round
here's example
.card-1{
width: 200px;
background: #5d5d5d;
border-radius: 10px;
}
<div>
<div class="card-1">
lorem ipsumm dolor sit amet
</div>
<h1>
Tittle
</h1>
<p>
text here
</p>
</div>
You have to use separate border radiuses. Try on this in your css file
border-radius: 15px 15px 0px 0px;
try this:
border: 3px solid #f00;
border-radius: 10px 10px 0px 0px;
There are special css properties to define border radius for each corner of a box. The css property border-radius is actually a shorthand for them. See https://developer.mozilla.org/de/docs/Web/CSS/border-radius fro details.
div {
width: 10em;
height: 5em;
padding: 1em;
border: 1px solid black;
}
.one {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
.two {
border-radius: 1em 1em 0 0;
}
body {
display: flex;
}
<div class="one">One</div>
<div class="two">Two</div>
I want to create the white border seen in the image below with CSS. White border that is set 25px inside the window. Iv'e tried to use box-shadow inset however was not able to create the space between the edge of the window.
I used this css:
border: 3px solid white; //took this out but still no luck
box-shadow: inset 0 0 0 5px #FFFFFF;
I also tried without the normal border as well.
I think I can create an overlay div that has a padding or margin and give it a border, but the problem is the content needs to be scrollable and clickable below it.
The goal:
The white box just above the icons.
Use a pseudo element
.parent {
position: relative;
height: 200px;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
height: 600px;
background: url(http://lorempixel.com/600/600/abstract/1) no-repeat center center / cover;
}
.parent:after {
content: '';
position: absolute;
left: 25px;
top: 25px;
right: 40px;
bottom: 25px;
border: 2px solid white;
}
<div class="parent">
<div class="wrapper">
<div class="content">
</div>
</div>
</div>
Use a transparent border to set the shadow where you want it.
The remaining problem is to extend the image to the borders. Use background-origin for this.
.test {
height: 250px;
width: 400px;
background-image: url(http://lorempixel.com/600/400);
background-origin: border-box;
background-size: cover;
border: 50px transparent solid;
box-shadow: inset 0px 0px 5px 5px cyan;
}
<div class="test">
</div>
hope this help.
body{
background: #000;
}
.wrapper{
width: 500px;
padding: 25px;
border: 3px solid #CCC;
}
.content{
border: 1px solid #fff;
padding: 15px;
color: #fff;
height: 400px;
}
<div class="wrapper">
<div class="content">
this is your content div with white border
</div>
</div>
I do not understand why in this simple code my .slot or .card classes seems to have a bigger margin/distance to their border at the bottom than at the top.
Thanks in advance,
JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/
<div id="hand">
<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
<div class="card" id="card4"></div>
</div>
<div id="playfield">
<div class="slot" id="slot1"></div>
<div class="slot" id="slot2"></div>
<div class="slot" id="slot3"></div>
<div class="slot" id="slot4"></div>
</div>
The CSS:
#hand{
text-align: center;
width: 320px;
border: solid black 3px;
padding: 5px;
}
.card{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 5px 0px 5px;
}
#playfield{
width: 320px;
text-align: center;
border: solid black 3px;
padding: 5px;
}
.slot{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 5px 0px 5px;
}
Thanks in advance!
If you are not comfortable with making the font-size:0 then here is a solution that i personally prefer.
Display:inline-block is tricky and has strange issues with margins. What i personally do is, i use float instead of inline-block. See this :
.card{
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 10px;
float:left;
}
.slot{
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 8px;
float:left;
}
What i did is, i added float:left to your .slot and .card and then created a new class .cls(clear:both) and applied that in the div structure. See if this helps.
http://jsfiddle.net/LgeAf/3/
Inline-block elements are tricky - because they are not treated as block elements when it comes to positioning them in the document flow. Their positions and spacings are influenced by CSS properties that control text, like line-height, word-spacing, letter-spacing and font-sizes.
If you set font-size in the parent containers, #card and #playfield, to 0, you will remove the extra bottom margin. See fiddle - http://jsfiddle.net/teddyrised/GwqcV/
#hand, #playfield {
font-size: 0;
}
The drawback of this method is that you will have to redeclare the font-size in the child elements if you are using relative font sizes, like ems.
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>
I have a div with different colors for both the border-bottom and border-right properties.
So they are separated via a line leaving the box in a 45 degree angle.
How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?
You can do this with box-shadow.
Demo:
Output:
CSS:
#borders {
border-bottom: 20px solid black;
box-shadow: 20px 0 0 0 red;
height: 150px;
margin: 30px;
width: 150px;
}
HTML:
<div id="borders"></div>
I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.
If we don't want the border on the upper edge, we can put border-width to 0.
border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;
Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)
In order to simulate a butt joint, you can stack two divs to get a simulated result:
div {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>
Stack more or control the top and bottom differently for better control over the appearance of the joint.
For the top border and the bottom border, you can use box-shadow:
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>
What you are seeing is that borders on different sides will split diagonally around the corner:
.border {
border: 10px solid;
border-top-color: forestgreen;
border-right-color: gold;
border-bottom-color: steelblue;
border-left-color: firebrick;
width: 40px;
height: 40px;
}
<div class="border"></div>
This is a behavior many use to create CSS triangles
To overcome this I can find 2 solutions: borders on a wrapper element, or linear gradients:
Option 1: Wrapper elements
.wrapper {
border-bottom: 10px solid steelblue;
height: 40px;
width: 50px;
}
.border {
border-right:10px solid gold;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="border"></div>
</div>
Note how the wrapper element has height of 5px more then the child. This is essential for the borders to align.
Option 2: Linear Gradients
.border {
border-bottom: 10px solid;
border-right: 10px solid;
border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
height: 40px;
width: 40px;
}
<div class="border"></div>
If you're looking for square ends on your borders, you can set two of the borders to 0px and then run a dummy animation like so :
#keyframes widthSet {
to{
border-right-width: 10px; //or top and bottom, your choice
border-left-width: 10px;
}
}
with animation-fill-mode: forwards;
You can't.
For 90˚ angles you could just use colored divs.
You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).