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>
Related
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>
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.
Quick and simple question,
is there a quick way to change on a button, the distance from the borders edge to the "real" edge of the element.
I dont want to get the border further away, i want that the background is spread 1 or 2 px more over the edge of the border.
Google does not show me the right solution or I'm searching with wrong terms, hope some of you can help me.
Since my question is not clear, here is an picture of what try to achieve
https://picload.org/view/rpogroor/test.png.html
What you need to use over here is the pseudo element. The trick is to have a normal button but not to use a border on that. Insted, use an :after pseudo element and using CSS positioning, we can simulate the effect you want, that is, the background spreads beyond the dashed border.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
button {
-webkit-appearance: none;
background: #ede032;
padding: 10px 20px;
border-radius: 20px;
border: 0;
position: relative;
margin: 40px;
}
button:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
border: 1px dashed #515151;
border-radius: 20px;
}
<button>Hello There</button>
Here, the code is pretty self explanatory. I am having a simple button, where am setting some basic styles like background, border-radius and so on. Later, am having an :after pseudo where I use the dashed border which then I overlay over the button using CSS Positioning.
Your question is un-clear. What do you mean by
from an borders edge to the "real" edge of the element.
Are you trying to not display the border? If that's the case then you can always set the border to have a transparent color which would not show the border.
You can add padding to the button to increase space between its contents and the edge of the button.
Is this what you want?
padding:5px 10px ;
This means that the : Top and bottom padding are 5px.
Right and left padding are 10px.
By default a button has padding : 1px 6px; So to increase it by 1 or 2 pixels, just use appropriate values.
.spaced-out {
padding: 5px 10px;
}
<button>Hello</button>
<br><br>
<button class="spaced-out">Hello</button>
You want box-sizing:border-box.
This will ensure that, no matter the border-width, the element will be the same size. I assume this is what you want although the question is not very clear what you're looking for.
Notice the difference between the boxes with borders:
.flex-cont {
display: flex;
width: 100%;
height: 300px;
align-items: center;
justify-content: center;
}
.flex-item {
margin: 10px;
height: 200px;
background: blue;
flex: 1;
border: solid 20px green;
}
span {
display: block;
position: relative;
top: 45%;
text-align: center;
width: 100%;
}
.one {
box-sizing: content-box;
}
.two {
border: none;
}
.three {
box-sizing: border-box;
}
<div class="flex-cont">
<div class="flex-item one"><span>box-sizing: content-box</span></div>
<div class="flex-item two"><span>No border</span></div>
<div class="flex-item three"><span>box-sizing: border-box</span></div>
</div>
Here is a new JS fiddle based on your edit.
New JS Fiddle
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 6 years ago.
I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:
As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using transition or rotation or something like this (I don't know, I'm not familiar with CSS3).
I searched for diagonal divs but I only got results like this. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?
Use border colors to display a diagonally cut div.
Combine it with ::after to use only one div.
.background {
background-color: #5555AA;
padding-top: 15px;
}
.content {
position: relative;
background-color: white;
height: 30px;
line-height: 30px;
padding: 0 100px 0 200px;
display:inline-block;
}
.content::after {
position: absolute;
right: -50px;
content: "";
border-bottom: 25px solid white;
border-left: 25px solid white;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
}
<div class="background">
<div class="content">KONTAKT</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I'm in the very early stages of creating a simple site. I'm trying to make a nav with 4 buttons that all take up 25% width inside an 800px container div. The buttons are all set to display inline-block and are 200px wide as they should be, but the 4th element is getting pushed onto a new line. Picture of issue.
At first I thought the border of the container div was messing things up, but i added box-sizing: border-box; and it didn't fix the issue. I then changed from a border on the container div to an outline, also with no luck. Using Chrome's Inspect Element tool, I can see that each button is 200px wide, yet they still won't fit on one line. HTML and CSS of these portions are below:
HTML
<h1>Midwestern Accent</h1>
<div id="nav_div">
<div class="nav_button button_border">Home</div>
<div class="nav_button button_border">About</div>
<div class="nav_button button_border">Music</div>
<div class="nav_button">Contact</div>
</div>
CSS
#content_div {
font-family: Arial, Helvetica, sans-serif;
margin: auto;
width: 800px;
background-color: black;
color: white;
/*border-width: 5px;
border-color: white;
border-style: solid;
box-sizing: border-box; */
outline: 5px solid white;
}
#nav_div {
border-style: solid;
border-color: white;
border-width: 0px 0px 5px 0px;
width: 100%;
vertical-align: top;
}
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
font-size: 30px;
vertical-align: top;
}
Inline block elements, like inline have natural spacing after them.
This is a good article on CSS tricks which explains different methods to getting around it.
Personally, I use the -4px margin-right fix.
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
margin-right: -4px;
font-size: 30px;
vertical-align: top;
}