This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 1 year ago.
I want to style a button and make it look like this:
I tried the code below, but it looks totally different.
button {
width: 500px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
}
I am interested in the border radius.
I suggest you to use something like this:
button {
width: 500px;
height: 30px;
border-radius: 15px; /* here we just change the radius to a fixed one, according to fixed height */
border: none; /* here we remove black border */
background-color: #f0f0f0;
}
For text, you can use text formating.
You have border-radius wrong. With your border-radius : 50%, will try to make the button oval kind of shape. So use px units to make rounded corners. Also there is default border on the button, so you have to set border to none. Below css would do the same thing :
button {
width: 500px;
height: 30px;
border-radius: 10px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
font-family: monospace;
}
Set border-radius to px instead of %. Half of the height (30px) will make it nice and round. Anything less will make it less rounded.
button {
width: 500px;
height: 30px;
border-radius: 15px;
background-color: #f0f0f0;
}
button {
width: 500px;
height: 30px;
border-radius: 15px;
border: none;
background-color: #f0f0f0;
}
<button>text here</button>
Related
I was wondering if is there's a way to do the following rectangle's borders with border-radius or any other property, take a look at what i need:
And so far this is what I have got using border-radius:
The rectangle at top was created with Wix, the other one is made with CSS and HTML. As you can see the borders as so different.
Is there a way to accomplish it?
This is possible as you can define each corner within the border radius value, which will then give you the shape you want, see below for a simple example and you can read more on how this works on https://www.w3schools.com/cssref/css3_pr_border-radius.asp
#rcorners {
border-radius: 4em / 2em;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
<div id="rcorners">Rounded corners!</div>
Try something like this, you want border-radius: x/y where x is the higher value for the corner your looking for
.test {
margin: auto;
width: 400px;
height: 100px;
background-color: blue;
border-radius: 30%/10%;
}
<div class="test">
</div>
You can handle the horizontal and the vertical radius by : border-radius: 50px/20px;
Look at this example :
div.example {
background-color: #6495ED;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
border-radius: 50px/20px;
}
<div class="example">Lorem Ipsum.</div>
This question already has answers here:
Half circle with CSS (border, outline only)
(6 answers)
Closed 4 years ago.
Can you provide me a suggestion on how to cut this circle into half? Also float them on between left and right.
.hello {
background-color: red;
width: 200px;
height: 180px;
border: transparent;
border-radius: 50%;
opacity: 0.50;
}
<div class="hello"></div>
This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle.
border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates. That way you get a perfect semi circle.
Try this:
#hello {
width: 200px;
height: 100px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
float: right; /* Change this to left to float it to left */
}
<div id="hello"></div>
I have made it float right. Just change the value to left to change to float: left;
Hope this helps!
you should first make 2x1 Rectangle, then with border-radius make it round, but in just to side. see below code:
.half-circle {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
border: 1px solid red;
}
To make an awesome CSS shapes you can see this cheatsheet page.
I'm using Pug and CSS to make a round button which looks like this without any text in it:
This is the code I used
button(class="round-button")
.round-button {border: none; padding: 40px; border-radius: 1000px; }
This looks nice without text. If I add text, it looks like this:
How can I keep my button circular while it has text in it?
Use border-radius: 50%.
Height and width also need to be the same.
.round-button {
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: pink;
text-align: center;
}
<button class="round-button">text</button>
you need just a fixed-heightspecially when your text's length is dynamic,if you use padding it wouldn't be round.
.round-button
{
border-radius: 50%;
height: 90px;
width: 90px;
}
In your initial mockup, you have an 80px by 80px circle. If you know your text will fit into it, consider doing the following:
.round-button {
width: 80px;
line-height: 80px;
text-align: center;
display: inline-block;
padding: 0;
}
This turns the padding to 0. The line-height forces the height of the circle. The width forces the width. You can leave the border-radius as you have it, or do 50% as others have mentioned.
The downside of this is that if the text renders large, it may overflow the boundary of your circle.
The width and height must have the same length.
If you don't know the width and height (no CSS declaration), you have to use JavaScript. Select all buttons. Loop through the buttons, measure the width and set the height with the measured width.
Example
function El(selector) {
return document.querySelectorAll(selector);
}
function getCSS(el, value) {
return window.getComputedStyle(el, null).getPropertyValue(value);
}
var roundButtons = El(".round-button");
roundButtons.forEach(function(roundButton) {
var width = getCSS(roundButton, "width");
roundButton.style.height = width;
});
.round-button {
border: none;
padding: 40px;
border-radius: 50%;
background: seagreen;
}
<button class="round-button">Button</button>
<button class="round-button">Button 2</button>
<button class="round-button">Another rounded square button</button>
This question already has answers here:
CSS Circle with border
(5 answers)
Closed 5 years ago.
The following code below adds a radio button with a number inside a border, but the border should be circle, how can I make it circle?
Note that the position of the text is important to not be affected by the css.
p {
outline-style: solid;
padding : 16px;
position: absolute;
}
<p><input type="radio">1</p>
Use the border and border-radius properties instead of outline-style:
p {
border: 3px solid #000;
border-radius: 50%;
height: 45px;
line-height: 45px;
position: absolute;
text-align: center;
width: 45px;
}
<p><input type="radio">1</p>
As you can see, you may also need to change the height and width elements to ensure that the element is a perfect circle (well, square).
try to set the border and then use order-radius.
p {
border: solid 2px black;
padding : 16px;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
}
<p><input type="radio">1</p>
This question already has answers here:
Border-radius and padding not playing nice
(5 answers)
Closed 7 years ago.
I run my website on Tumblr. I just added the CSS Border-Radius property and set it to 20px for all images with a specific ID. However, as you can see, the corners on the right side of the image are not properly rounded, but the left side corners are.
The CSS code looks like this:
#articleimage {
float:left;
padding-right: 10px;
padding-bottom: 1px;
width: 400px;
border-radius:20px;
}
I've determined that the issue is caused by the padding to the right, but I require that CSS property. How can I stop this conflict?
View screenshot: http://i.stack.imgur.com/es0aa.png
try changing your padding for margin:
#articleimage {
float:left;
margin-right: 10px;
margin-bottom: 1px;
width: 400px;
border-radius:20px;
}
The problem may be due to the use of an <img> tag. The corners may be not fully rounded at the right because the image is prone to be distorted with width and the border-radius (i.e. the image may not fill the entire <img> element, therefore it seems that right border-radius is being "less rounded").
Margins or paddings do not affect, as you can see in the example below:
.cnt {
background-color: green; height: 700px; width: 600px
}
#articleimage,#articleimage2,#articleimage3,#articleimageAsBG {
display: block;
float: left;
width: 400px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
#articleimage {
padding-right: 10px;
padding-bottom: 1px;
}
#articleimage2 {
margin-right: 10px;
margin-bottom: 1px;
}
#articleimage3 {
padding-right: 10px;
padding-bottom: 1px;
width: 100px;
}
#articleimageAsBG {
height: 192px;
background: url('http://i.stack.imgur.com/es0aa.png') no-repeat center black;
background-size: 98%;
}
<div class="cnt">
<img id="articleimage" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage2" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage3" src="http://i.stack.imgur.com/es0aa.png" />
<div id="articleimageAsBG">
</div>
</div>
You notice:
#articleimage is using padding and the right border-radius are slightly smaller.
#articleimage2 is using margin and the right border-radius are equally smaller.
#articleimage3 has reduced width (tiny image) so you can notice the difference.
The alternative, and solution I am suggesting to you, is to use another element (like a div) where you set that image to the background like the last one in the example (scroll down to see #articleimageAsBG), you just need to adjust its background-size property.
I also suggest that you add:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
For better browser compatibility. And maybe consider using display: inline-block instead of float. Hope it helps!