Is it possible to apply border-radius in the background-image of a text <input> or <textarea>?
The border-radius property applies to either an inline or a block level element.
Therefore, you can created rounded corners on a input and a textarea element.
However, the border-radius property does not affect any background image associated with an element.
The short answer is: no.
To illustrate, if you have the following HTML:
<textarea class="ex1" name="theText" >Example 1</textarea>
and apply the following CSS:
textarea.ex1 {
border-width: 0;
border-radius: 10px;
background-color: beige;
padding: 5px;
width: 200px;
height: 200px;
}
textarea.ex2 {
border-width: 0;
border-radius: 10px;
background: lightgray url(http://placekitten.com/150/150)
center center no-repeat;
padding: 5px;
width: 200px;
height: 200px;
}
you see that the textarea element has rounded corners, but the rounded corners do not affect the background image.
See Demo Fiddle
Workarounds are possible by using absolute positioning of extra sibling elements, but that is outside of the scope of your question.
Yes. Check this out-
Border-radius on background-image
Follow the above link to get the complete details.
Related
I can't seem to get a border around a circle in CSS. I've double-checked to make sure the HTML classes were the same in CSS and tried various combinations of CSS properties. For some reason border: 4px solid #a569bd; is filling in the circle instead of becoming a border.
jsfiddle
/* circle icons for legend */
.layer-circle {
width: 8px;
height: 8px;
margin-top: 8px;
margin-left: 5px;
position: absolute;
display: flex;
border-radius: 50%;
}
.allbrew {
background-color: black;
}
.brewhunyrds {
background-color: black;
border: 4px solid #a569bd;
}
<b>Points of Interest</b>
<div class='poi-layer-options'>
<div class="layer-circle allbrew"></div>
<a class="layer-text" id="allbrew"><span>Breweries</span><br></a>
<div class="layer-circle brewhunyrds"></div>
<a class="layer-text" id="brewhunyrds"><span>Trail Breweries (100 yards)</span><br></a>
</div>
The code you posted doesn't correspond to what you describe (the jsfiddle does), but what you describe can happen if box-sizing: border-box; applies to that element (maybe caused by an according CSS rule with a * selector): Since in this case the given width includes the border and a border of 2 x 50% adds up to 100% (i.e. the full width), the border will completely fill the element.
To avoid that, add box-sizing: content-box; to the CSS rules for that element. This will add the border width to the element width / place the border outside the element.
Your fiddle modified accordingly: https://jsfiddle.net/sayxcfrn/
I will attach an image with the effect I'm trying to achive using html and css.
Instead of the black color, I'll have an image, and I want to make an white overlay to give the impression of a round bottom. This could be done using an background image but I'd like to make this using css and keep that option as a last resort.
Setting 50% to border-bottom-left-radius and border-bottom-right-radius should give you the expected results.
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
div {
background-color: black;
width: 400px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div></div>
Something like this:
div {
background-color: orange;
width:500px;
height:200px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
overflow: hidden;
}
<div>
<img src="http://lorempixel.com/output/city-q-c-640-480-5.jpg">
</div>
This shape can be achieved by using 2 HTML elements.
We set the rectangular primary element to overflow: hidden.
The child element should be shaped as an oval (can be done via border-radius), and scaled+translated a bit so that it has only the bottom edge within the main element area.
Please try this jsFiddle.
I have a query in relation to images, using just html and css (if possible).
I would like to have an image (e.g wallpaper image of a city at night) transformed into a circular shape with a surrounding border.
Hopefully i would use this image also as a button, and add text to it.
So for example a picture of a football stadium in the middle, circular in shape. Surrounded by a small border. When you click on the image (which will have text on it) you are transferred elsewhere...I will have 4 of these in a line on my poage.
Thanks
All help in this matter would be greatly appreciated
<div class="circular"><a></a></div>
.circular {
border: solid 1px
width: 300px; //edit this
height: 300px; //edit this
border-radius: 150px; // a half of width and height will cause a circle
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
Just answering your position question, check the answer here https://stackoverflow.com/a/19461564/2012904
The flexbox is a good method.
See this demo
HTML:
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
CSS:
.round{
display:table-cell;
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
border:2px solid #cc0000;
background:url("http://www.placehold.it/100x100");
vertical-align:middle;
text-align:center;
}
Using the css property border-radius you can round the edges of an element. If you use border-radius: 50% you will end up with a circular image.
So, if you had the following HTML:
<img src="some.url" class="circle">
and the following css:
.circle{ border-radius: 50%;}
You will end up with a rounded image. In order to have a circular image, the dimensions of the element that border-radius is being applied to must be square. So, you will need to set a height and width property in the css as well.
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
}
You should be aware if you are not using a square image and are applying the dimensions directly to the image, you could end up stretching or smushing the image.
To add the border to the image, you need to include the border property in your css:
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
border: red solid 2px;
}
Alternatively, you could just create a button element and add the image as a background image to that element like this:
//html
<button class="circle"></button>
//css
.circle{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: red solid 2px;
height: 150px;
width: 150px;
}
This will create a button element with a background image from the url specified. The background-size property will ensure that the image is always large enough to cover the button. The background-position will center the background image inside the button so that the portion of the image that is shown on the button will be from the center of the background image.
This might be a better option for you since you can change the background-position property to position a background image and keep the focus of that image in the center of the new circular element you have created.
In order to use the round image as a button you have a few ways you can go. The best would be to use pure javascript or use jQuery to select the rounded element and add a click event handler.
You could also wrap the rounded element in an <a> element and simply turn the rounded element into a link. Like this:
<button class="circle"></button>
In this case, you could remove the button if you wanted:
However, make sure you then add display: block; to your css for the .circle class:
.circle{
display: block;
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius:50%;
width: 150px;
height: 150px;
border: red solid 2px;
}
Please see the attached image and jsfiddle: http://jsfiddle.net/chqy9dja/
A simple textarea, with rounded corners. Notice the problems on the right top and right bottom corners, where the scroll bar appears. The screenshot is taken with Chrome, but all other browsers share this bug.
I know this can be fixed with a jquery/javascript plugin, but I'm looking for a css-only approach.
I only need to add some padding between the scrollbar and the border.
Tried this, best solution so far: wrap the textarea in a div, style the div instead. Works, only minor problems appear when focusing on the element.
Tried to replace the border with an outline, and add outline-offset using css. Works great, problem is that outlines can not have rounded corners..
Any other ideas please? Style directly on the textarea, not a wrapping div.
<textarea id="a" class="a" />
.a {
width: 300px;
height: 300px;
border-radius: 10px;
border: 1px solid #000;
}
As you mentioned, outline can not have rounded corners. One option would be using a combination of border and box-shadow.
For instance you could give the element a transparent border and a proper box-shadow as follows:
Example Here
textarea {
width: 300px;
height: 300px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000;
border: 5px solid transparent;
}
I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}