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.
Related
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. :)
In the following image I have a form which has rounded corners but if you look closely, there is some sort of ugly overlap on the bottom corners (some sort of white corner)
I tried using a bigger border-radius on the background and taking away the background, but looks like it isn't the background but the element itself, since that didn't do anything.
This is my css code for the bottom of the form (the gray area around the button)
.formss #button_div{
clear:both;
height: 60px;
width: 100%;
border-top:1px solid #ddd;
margin-top:5px;
padding-top: 10px;
text-align:center;
background:rgba(51,51,51,0.8);
-moz-border-radius-bottomleft: 19px;
-moz-border-radius-bottomright: 19px;
-webkit-border-bottom-left-radius: 19px;
-webkit-border-bottom-right-radius: 19px;
border-bottom-left-radius: 19px;
border-bottom-right-radius: 19px;
}
I have experienced this problem before, I guess keep doing something wrong but I dont know what.
EDIT: jsFiddle --> http://jsfiddle.net/Z6pwR/4/
I dont know why the text inputs are going outside the form in the fiddle
I can't explain why your solution isn't working properly, but if you remove the overflow: hidden property from #agregar_instituto_div and add it to the children / the form, the problem is gone.
You need to set set a value for the ".widearea" border. The standard browser input border is causing that problem.
jsfiddle.net/Z6pwR/5/
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;
For some reason one of my inputs acts weird. I apply general css for all my inputs
.text-input {
padding: 6px 10px;
background: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 330px;
border-bottom: 1px solid #000;
}
and I apply this specific css for one particular div to make it higher
#letter {
height: 100px;
}
For some reason when I focus on #letter input and start typing text appears in vertical middle of it, I don't know what is causing the problem, but here is my page, if you focus on "Message" input you will see what I mean (tested in chrome).
http://freshbeer.lv/development/en/contact.php
Perhaps you want to use a textarea instead? input type="text" is single line only.
You should use a Text Area element for that.
<textarea></textarea>
I have this wireframe http://problemio.com/problemionewest.pdf and you see on the top-right there is a text box that has rounded corners.
Is that done with css only or image and css? I have an image that was provided to me, but would much rather just do it with css. In any case, I don't know how to do it either way lol, so any help would be great!
The current version I have is here: http://www.problemio.com
You could use CSS to do that, but it wouldn't be supported in IE8-. You can use some site like http://borderradius.com to come up with actual CSS you'd use, which would look something like this (again, depending on how many browsers you're trying to support):
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
This can be done with CSS3:
<input type="text" />
input
{
-moz-border-radius: 15px;
border-radius: 15px;
border:solid 1px black;
padding:5px;
}
http://jsfiddle.net/UbSkn/1/
However, an alternative would be to put the input inside a div with a rounded background, and no border on the input