I am trying to create a div element with a rounded border. I am aware of the use of the border-radius, but I noticed that using this property will curve the corners only, like the top-right, top-left etc. so i was wondering if there is some property to curve the side of a div element, something like border-radius for top, down, left and right.
For example, a div with a straight top, bottom and left but a rounded right side. i would like to create the right side so that it is more rounded at the top than the bottom.
My aim is to create a div element with rounded right side which will not affect the top and bottom sides. i mean the curve in the right side should stop as soon as it reached the top or bottom side. (so that the top and bottom remains straight rather than slightly curved).
Is there a way to get this effect using css?
You can specify horizontal and vertical border-radii via the slash notation to achieve such an effect...
div{
width:100px;height:100px;
border:3px solid #bada55;
border-radius:10px/50%;
}
<div></div>
This would set a vertical border-radius of 50% and a horizontal border-radius of 10px for all sides. You can define this for each corner individually (So you have up to eight values).
You can use the / effect which defines the horizontal and vertical radii. 10px is horizontal, 100px is vertical
div
{
height: 200px;
width: 200px;
border: 2px solid #000;
border-radius: 10px/100px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
With the border radius set to 10px/100px this makes the sides slightly curved. Set the left corners to 0 and you have only one side that is curved :)
http://jsfiddle.net/UWbKf/
You can still use border-radius for this. You just have to be a bit more creative with the parameters you give it.
border-radius allows you to specify both a horizontal radius and a vertical radius for each corner. Using these gives you the flexibility to stretch a curve effect across the whole of one side your element if you wish.
An random example that makes an odd shaped box:
.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }
And here it is on jsFiddle.
Rather than give you loads of detailed examples, I'll link you to this site, which demonstrates the flexibility of border-radius, and allows you to design the shape you want: http://www.webtutorialplus.com/border-radius.aspx
Hope that helps.
Related
Initially, I want to put words into this circle. Maximum character number is 20.
I want to set font size around 24px and the circle's width and height are 100px;
However, the 2nd word fell outside of the circle.
Can anyone help?
http://codepen.io/yumikohey/pen/ocFtJ
Here is my code.
<div class="blog_circle">
Channel Buzz
</div>
.blog_circle{
width:100px;
height: 100px;
border-radius:50px;
font-size:24px;
color:#000;
line-height:100px;
text-align:center;
background:#45C2B3;
margin-left: 50px;
margin-top: 50px;
}
On the other hand, how to make the font size change depends on user's inputs?
why do you have a line-height:100px? It is too high and that is what is causing it to fall outside the circle......
change it to say 40px........here is the demo
UPDATE:
add display:table-cell; to your style. This will center the text vertically in your div. when you actually inspect element and look at the div, the text is at the center of the div vertically. Updated FIDDLE
your circle is actually a square with width and height of 100px and its corners are trimmed by a distance of 50px giving the visual of a circle.
now you have your words with their font sizes but you also have line-height mentioned as 100px . Now this is like , imagine a page of ruled paper ( the one that has lines to write) line height defines the size between two lines. now in your case the line height is 100px which is the height of your entire box. If you lower the line height to say 50px (which will give you 2 lines to write on inside that 100px height box) it should work.
hope this helps
Try using padding and changing line-height and a few other things. DEMO
I constructed a thought bubble with HTML and CSS and found an issue solely on IE11 - every other browser (down to IE9) works great.
The idea is simple:
Have a container that contains text and give it a background-color and round corners. Then put another element into it and make it look like an arrow. Position the arrow so that it sits right next to the container.
The problem:
Somehow, even though the arrow sits perfectly adjusted, there is a very small line between arrow and container. And this line is less then 1px in height. If I move the arrow up a notch then it sits inside the container which cannot be accepted due to the fact that arrow and container must have transparency.
Here is the jsfiddle showing the problem:
http://jsfiddle.net/hurrtz/t2RhR/3/
HTML really is simple.
<div id="bubble">
<div class="arrow"></div>
</div>
CSS is equally simple and boils down to this (some pseudo code ahead):
#bubble {
(some dimension giving)
background-color: rgba(0,0,0,0.5); //black, semitransparent
position: relative;
}
#bubble .arrow {
position: absolute;
bottom: 0 - height of arrow:
background-color: rgba(0,0,0,0.5); //black, semitransparent
}
By the way: The problem increases, decreases or seizes to exist the more I let IE11 zoom in or if the browser window's height is changed.
Here's what it looks like with the gap in IE11:
A screenshot of this picture, zoomed at 500% shows this:
It's because the way the border is calculated. Screen is a finite grid, so when you decide that the center of the arc is at coordinates e.g. "10 x, 10 y" it could mean different things:
the center of the arc is in the middle of the 10th pixel?
the center of the arc is at the begginnig of the 10th pixel?
the center of the arc is at the end of the 10th pixel?
So, when it draws the arc with radius 10px it could go half pixel farther (or closer) from the point you expected (and will yield "half pixel" sizes, a 2px gray line where you wanted 1px black, a circle that is not really round or some other sad surprise).
This kind of different behaviour is common among the major browsers (e.g. see this: Border-radius: 50% not producing perfect circles in Chrome ) I think it shouldn't be considered a bug, those are just implementation decisions that unluckily for us differ from a browser to another.
The most common solutions is to play with the border width (0.5px,1px,2px) and radius (even/odd sizes) or even positioning with decimals (bottom: -19.5px?). Can't say wich combination will yield best results for this case since I can't reproduce it in Windows 7 + IE11.
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* grey line fix */
all well and good but there is no real answer to the problem here. after a search i found this. and it worked on the IE and safari grey line issue on a simple white box i use.
Based on #miguel-svq answer (thanks!!!), which was very helpful, I have simplified it with the following:
#bubble{
/* Set the border color to match your surrounding background.
It will take away the grey line in IE11 */
border: solid 0.5px #f0f0f0;
}
I have a png of a simple rounded rectangle I made in Photoshop. I want the entire rectangle to show, however there is a little cropping on the top right, bottom right and bottom left corners of the image that make it square. The top left corner is the only one of the 4 that maintains that rounded edge.
I saved the image in photoshop and gave a little bit of extra room on all 4 sides - saving it as 870 * 335 pixels. My CSS looks like this:
#main {
margin: 8% auto 0 auto;
width: 870px;
height: 335px;
background: url(images/form.png) 125px 87px no-repeat;
position: relative;
}
The extra space I gave it in photoshop should show the whole rectangle correct? Or am I missing something critical? Thanks!
This part doesn't make sense to me:
background: ... 125px 87px ...;
You are forcing the image to a background position that will not allow the entire thing to show, if it is the same width as its container.
Try this:
background: url(images/form.png) 0 0 no-repeat;
There is nothing wrong with using background positioning on your bg image if you're correctly using sprites. However, are you trying to move the actual container (#main) left 125px and down 87px? Using background positioning that way would not achieve what you're trying to do.
If that's the case, try using padding instead. If not, let us know. Can you provide a link to your work? Firebug is a must-have if you don't have it.
I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right?
If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively.
background-position: right 30px center;
It works in most browsers. See: http://caniuse.com/#feat=css-background-offsets for full list.
More information: http://www.w3.org/TR/css3-background/#the-background-position
It is possible to use attribute border as length from the right
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
There is one way but it's not supported on every browser (see coverage here)
element {
background-position : calc(100% - 10px) 0;
}
It works in every modern browser, but it is possible that IE9 is crashing. Also no coverage for =< IE8.
As far as I know, the CSS specification does not provide for exactly what you're asking, outside of CSS expressions, of course. Working off the assumption that you don't want to use expressions or Javascript, I see three hackish solutions:
Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px.
Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container.
Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
Try this:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Note though that the code above will move the whole element (not the background image only) 5px from the right. This might be ok for your case.
You can do it in CSS3:
background-position: right 20px bottom 20px;
It works in Firefox, Chrome, IE9+
Source: MDN
Image workaround with transparent pixels on the right to serve as right margin.
The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.)
This works well consistently across fixed widths as well as widths in percentages.
Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right!
Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc.
If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class :after to do practicaly anything with the background.
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
this css will put background to bottom right corner of ".container" element with 20px space on the right side.
See this fiddle for example http://jsfiddle.net/h6K9z/226/
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
If you want to specify only the x-axis, you can do the following:
background-position-x: right 100px;
Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.
I was trying to do a similar task to get a dropdown arrow always on the right side of the table header and came up with this which seemed to work in Chrome and Firefox, but safari was telling me it was an invalid property.
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
After doing a bit of messing around in the inspector, I came up with this cross-browser solution that works in IE8+, Chrome, Firefox, and Safari, as well as responsive designs.
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
Here is a codepen of how it looks and works. Codepen is written with SCSS - http://cdpn.io/xqGbk
You can position your background image in an editor to be x pixels from the right side.
background: url(images_url) no-repeat right top;
The background image will be positioned in top right, but will appear to be x pixels from the right.
Works for all real browsers (and for IE9+):
background-position: right 10px top 10px;
I use it to RTL WordPress themes.
See example: temporary website or the real website will be up soon.
Look at the icons at the big DIVs right corners.
Another solution I haven't seen mentioned is to use pseudo elements and I do believe this solution will work with any CSS 2.1 compliant browser (≥ IE8,≥ Safari 2, ...) and it should also be responsive :
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;...
Test it for your self here : http://jsfiddle.net/yHucT/
If the container has a fixed height:
Tweek the percentages (background-position) until it fits correctly.
If the container has a dynamic height:
If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom.
I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. In my case, my background is an arrow down that would replace the basic drop down icon. In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side.
Hope this helps!
Tweaking percentages from the left is a little brittle for my liking. When I need something like this I tend to add my container styling to a wrapper element and then apply the background on the inner element with background-position: right bottom
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
The .content-breakout class is optional and will allow your content to eat into the padding if required (negative margin values should match the corresponding values in the wrapper padding). It's a little verbose, but works reliably without having to be concerned about the relative positioning of the image compared to its width and height.
Its been loong since this question has been asked, but I just ran into this problem and I got it by doing :
background-position:95% 50%;
Solution for negative values. Adjust the padding-right to move the image.
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
Better for all
background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;
This works in Chrome 27, i don't know if it's valid or not or what other browswers do with it. I was surprised about this.
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
This question already has answers here:
Position a CSS background image x pixels from the right?
(21 answers)
Offset a background image from the right using CSS
(17 answers)
Closed 2 years ago.
I want to set a background image for a div, in a way that it is in the upper RIGHT of the div, but with a fixed 10px distance from top and right.
Here is how I would do that if wanted it in the upper LEFT of the div:
background: url(images/img06.gif) no-repeat 10px 10px;
Is there anyway to achieve the same result, but showing the background on the upper RIGHT?
In all modern browsers and IE down even to version 9 you can use a four-value syntax, specified in CSS3:
background-position: right 10px top 10px;
Source: MDN
Use the previously mentioned rule along with a top and right margin:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
Background images only appear within padding, not margins. If adding the margin isn't an option you may have to resort to another div, although I'd recommend you only use that as a last resort to try and keep your markup as lean and sementic as possible.
There are a few ways you can do this.
Do the math yourself, if possible. You already know the dimensions of your image. If you know the dimensions of the div, you can just put the image at (div width - image width - 10, div height - image height - 10).
Use Javascript to do the heavy lifting for you. Pretty much the same method as above, except you don't need to know the dimensions of the div itself. Javascript can tell you.
A more hackish way would be to put a 10px transparent border around the top and right of your image, and set the position to top right.
I don't know if it is possible in pure css, so you can try
background: url(images/img06.gif) no-repeat top right;
and modify your image to incorporate a 10px border on the top and right in a transparent color
You can use percentages:
background: url(...) top 98% no-repeat;
If you know the width of the parent div it should be pretty easy to determine what percentage you need to use.
One solution is to absolutely position an empty div, and give that the background. I don't believe there's a way to do it purely with CSS, no changes to the image, and no extra markup in a fluid layout.
You can fake the space on the right hand side with a border in pixels (white most of the time or maybe something else)
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
The correct format is:
background: url(YourUrl) 0px -50px no-repeat;
Where 0px is the horizontal position and -50px is the vertical position.
CSS background-position accepts negative values.