I have a form that I would like to round the corner of the borders that you see below. I would like the borders that outline the form to meet and round.
I have tried the border-radius method but it produces this. It rounds the container, which is what I don't want.
I have also taken a look at the CSS border-style property, but it doesn't not have an option for rounded intersections of borders. If anyone can help, that would be much appreciated!
EDIT
I have created a JSFiddle with my HTML and CSS.
First corner removed because of the tab. Here's a FIDDLE
.tab-content {
border-radius: 0 30px 30px 30px;
-moz-border-radius: 0 30px 30px 30px;
-webkit-border-radius: 0 30px 30px 30px;
}
What you want is:
.tab-content{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/stryd3r/vB3m2/1/
While giving the border-radius to your container, give it to the form aswell. :)
Related
I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
I have a situation in which I'd like to be able to give a slight round to the right side of a div. Is there any CSS wizardy that can achieve this? If so, please demonstrate using this fiddle template: http://jsfiddle.net/z2hejemu/
HTML
<div class="rounded-side">
<p>This div is by default rectangular in shape. I'd like the right side of it to be rounded, if that's possible. </p>
</div>
CSS
div.rounded-side {background-color:yellow;padding:10px;}
div.rounded-side > p {font-size: 36px;}
To get the semicircle you're looking for, you'll want to take advantage of the scaling requirement dictated by the spec. The key is to use border-radius with equal and very large values (see the fiddle http://jsfiddle.net/gLsd2z4L/ forked off of yours):
div.rounded-side {
background-color:yellow;
padding:10px;
border-radius: 0 100em 100em 0;
}
div.rounded-side > p {font-size: 24px;}
<div class="rounded-side">
<p>This div is by default rectangular in shape.
I'd like the right side of it to be rounded, if that's possible. </p>
</div>
This works because, as described in the spec:
Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.
In the example, the total of the radii is 200em; assuming the height (or width, whichever is smaller) of your element is less than this total, the radii will be scaled down proportionally. Since we're choosing equal values for the radii, they will continue to be equal, just reduced. Choosing very large values (i.e., sizes that the element's box will never come close to) forces the browser to do the scaling.
In the link "The curious case of border-radius:50%" posted by Stephen P in a comment on another answer, they suggest using the value 9999px; I used 100em simply because it looks cleaner to me. Unless there's some performance cost with some values/units over others (very doubtful), it shouldn't matter what you use, as long as the radii are equal and their total is larger than the element's size.
You're just missing border-radius:
http://jsfiddle.net/z2hejemu/3/
div.rounded-side {
background-color:yellow;
padding:10px;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
where the border-radius format is (in this case): top-left top-right bottom-right bottom-left
This code below should solve your issue.
div.rounded-side {
border-radius:0 20px 20px 0;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-webkit-border-top-right-radius: 2em;
-webkit-border-bottom-right-radius: 2em;
-moz-border-top-right-radius: 2em;
-moz-border-bottom-right-radius: 2em;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
So I'm trying to create a textbox with rounded corners but I don't know exactly how to go about doing it. I have the HTML and CSS here for what I want so far but I can't wrap my mind around rounding the corners.
Html:
<form action="index.php">
Textbox <input type="text"/> <br />
</form>
For right now, all I need is the CSS if it is possible. This is what I have so far of the CSS:
form {
height:50px; width:200px;
}
If this is impossible for CSS to this just say that in the comments but if not, please tell me. Thanks
You could try border-radius, however keep in mind it won't work in all browsers:
input[type="text"] {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Demo: http://jsbin.com/uduyew/1/edit
You can add rounded corners by adding the following to your css file:
input {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
I use 3px here as an example - you could easily change that. The higher the number the more rounded the corners. You could also add rounded corners to a single corner like this:
input {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
}
That example would round only the top left corner. Playing with that code you could probably see how easily you could round any specific corner or all of them at once.
I´m having this problem with border radius on IE-9
As you can see it creates some white pixel on the left border. any ideas why is that?
This only happens on IE 9, all other browsers are ok
This is the markup:
<ul class="tags clearfix">
<li>
Etiqueta Uno
</li>
<li>
Otra etiqueta
</li>
</ul><!-- tags -->
This is the CSS:
#article_sidebar ul.tags li {
background: #000000;
list-style: none;
float: left;
margin-right: 4px;
padding: 0px 18px 0px 19px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
line-height: 20px;
margin-bottom: 4px;
}
#fxg Why don't you also try making an IE-Only Stylesheet. You can refer this for making a stylesheet, that will target only IE and in that stylesheet you can give
li{
border: 0 none;
}
Hope, that works for you.
If I had to guess, I'd say it's a rounding error. This can happen under certain conditions, such as when the calculated value is a non-terminated floating point value (ie - 3.3333333...). Depending on how the browser does its rounding, this can create a visual error, such as what you're seeing.
Take a look at your padding value. Notice how your padding-right is 18px, and the right side doesn't have this issue, but your padding-left is 19px? Try changing your padding-left to 18px and see if that fixes the issue.
Also, try changing your border-radius value to something a little larger, such as 3px or 4px and see if it changes anything.
Also, make sure that you haven't accidentally zoomed in slightly. You can ensure your browser's zoom is reset by pressing ctrl+0.
You can try to set overflow: hidden; for lis, and/or outline: none; for as.
I have a div styled like so:
Jsfiddle
How can I remove all of the left hand side border, without the ugly curved radius?
Is it possible in CSS? Or is there a hack to do it? (or am I being too picky?)
Thanks Muchly,
Harley
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
This will override any border radius css.
Is this what you are looking for?
border-radius: 0px 6px 6px 0px;
if you want to remove the border just use :
border: 0px;