I have a rounded button like this.
.rock{
height:100px;
width:100px;
border-radius:100px;
border-color:yellow;
border-width:8px;
}
<button class="rock" type='button'>Button</button>
My question is, how can I remove the weird half-colored thing that shows up on the button border and changes when clicked. I just want the button border to be solid yellow.
Set border-style to solid. I think it's outset by default, which gives you a more beveled treatment.
.rock {
height: 100px;
width: 100px;
border-radius: 100px;
border-color: yellow;
border-width: 8px;
border-style: solid;
}
<button class="rock" type='button'>Button</button>
Related
I trying to make a border appear around the circle button after clicking but the border is a rounded square instead of a circle.
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
border: none;
}
.dot:after {
border: solid 1px #232323;
border-radius: 50%;
}
<button class="dot" style="background-color: #cc6c6c;"></button>
You should use the :focus selector instead of :after, and need to hide the default outline property to make your alternative focus style (using a border) visible.
(You also don't need to re-set the border-radius property, since it hasn't changed)
To avoid the button jumping when focused, you can use a transparent border on your initial button style, see the CSS comment in the example.
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
/*
Using an transparent border, rather than no border,
will prevent the focus style from causing the button to
jump down by the border thickness (1px in this case)
*/
border: solid 1px rgba(0,0,0,0);
}
.dot:focus {
border-color: #232323;
outline: none;
}
<button class="dot" style="background-color: #cc6c6c;"></button>
i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
I'm new with css, but the thing that i'm trying to do is slightly complicated, at least for me. I have a picture that i want to cover with a circle, transparent from the inside, black from the outside.
this is what I've accomplished so far:
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:6px; left:6px; width:81px;
}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
https://jsfiddle.net/dmL56kek/
now i'm looking to cover the outer of circle with a solid color.
PS: i don't want to apply any style on the image because it won't work in my case.
A little change is css would help and i have used width:78px with a calculation that width of outer div is 70px and border is 4px from left and right.
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
I'm trying to create a button toolbar like so:
/------+--------+-------\
| left | middle | right |
\------+--------+-------/
All I have to do in this fiddle, is to eliminate the margin between the buttons. But how to do this without using negative values for margin? Is this possible, or exists better ways to create a toolbar?
HTML:
<button class=left>left-button</button>
<button>middle-button</button>
<button class=right>right-button</button>
CSS:
button {
border-radius: 0px;
border: 1px solid green;
margin: 0;
}
.left {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.right {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the spaces between the buttons as below:
<button class=left>left-button</button><button>middle-button</button><button class=right>right-button</button>
.
button {
border-radius: 0px;
border: 1px solid green;
margin: 0px;
}
http://jsfiddle.net/4ssd9/7/
just add float:left;
i also wrapped it with container so it will be centered, you can remove them if you want.
see updated fiddle
hope that helps.
You can use float:left; on the button.
button {
border-radius: 0px;
border: 1px solid green;
margin: 0;
float:left; /* Add this */
}
DEMO
Here I have made the required changes please check the fiddle link http://jsfiddle.net/Mohinder/vwK3Z/
what you need to do is make buttons float:left; remove right border from left button and left border from right button the way I have it on fiddle.
And if you want no border-between then add class="mid" to middle button and add .mid { border-left:none; border-right:none; } in your CSS
Let assume that I have image with border: 1 px solid black because i want it to have border. But for more i want rounded corners so i give border-radius: 10px. But this now looks bad because corners don't have border. Is there possibility in html and css to do something which give borders to corners or answer is maybe somewhere in (for example) in jQuery?
sure just put the border on too.. and where there's a background color you can use an image, however IE support will be non-existant, but you might try CSSPie for enhancement for it. I think also some browsers do have a problem clipping on image to the round corners but am not too sure on overall support or fixes, perhaps putting the border on a parent div then rounding the image inside it might give a neat effect?
Example Fiddle
div, img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
background: #0f0;
width: 200px;
margin: 50px;
text-align: center;
line-height: 40px;
}
HTML:
<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">
Update: Webkit browsers do have problems with this if it's actually an image that needs rounding with borders, here's one workaround that seems to help:
New Example Fiddle
(view with webkit to see difference between second and third images)
HTML:
<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>
CSS:
div {
margin: 50px;
text-align: center;
line-height: 40px;
width: 100px;
height: 100px;
}
.ri {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
border: 1px solid #000;
}
.ri img {
display: block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
}
the background-clip is supposed to help the background clip to the padding-box, which should in theory stop a background-image or color from extending into the border, but in itself it doesn't appear to work very well, so I nested the image and rounded both it and the parent div and then put the border onto the parent div, Webkit was happy ;)
You might try this curved-corner project on Google Code that purports to allow the border-radius CSS property to work cross-browser.
you can write with css3 & for IE you can download piecss3 js.
Example
div{
width:200px;
height:200px;
background:red;
color:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
border:2px solid yellow;
behavior: url(PIE.htc);
}
check this
http://jsfiddle.net/sandeep/KDBGV/
The other ways is:
CSS:
.container {
background:gray;
color:#fff;
margin:0 15px;
}
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML:
<div class="container">
<b class="crvtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
Place the content here
<b class="crvbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
This is going to work in all the browsers.
Cheers and Enjoy :)
Well Cris,
The classes are for the spanned elements to create a curvy edges. Simply modify
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
with
.crvtop, .crvbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom * {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
and it will work
Hope that helps..