I have some anchor tags. I am applying border radius to them so that they looks inside a round shape (CIRCLE). It must flexible to their text width. I am trying but not getting what to do.
FIDDLE
How can I achieve that? please any suggestion will be appreciated.
abc
abcdefgh
css:
a{
border:1px solid black;
padding:10px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
You can give radius in percentage.
CSS:
a{
border:1px solid black;
padding:10px;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
border-radius: 10%;
}
Here is Updated fiddle
From border radius this is not possible to get same circle around anchor because it depends on anchor text size. if it is different it reflect circle also.
Update:
You can do this with div by giving then width and height: DEMO
Another Example
Related
I'm trying to replicate the design of google calendar, and its text input box looks like this when clicked:
https://ibb.co/6Hqrnt4
but what I created looks like this:
https://ibb.co/HprQ125
My code was like
.element{
border-radius: 2px;
border: none;
border-bottom: 2px solid;
}
As you can see, the bottom border of mine gets whined up at the end.
The counterpart of google calendar isn't. I've noticed that the bottom border doesn't perfectly fit the original grey box(zoom in the image), but it doesn't really matter. How can I achieve this?
You can do something like this by giving the blue border to a new element.
.grey-box {
width: 100px;
height: 50px;
display: block;
background-color: #f1f1f1;
border-radius: 5px;
}
.blue-line {
display: block;
width: 100px;
border-bottom: 5px solid blue;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="grey-box"></div>
<span class="blue-line"></span>
Just taking a guess here as I’m on mobile. Maybe the button is within a div with a bottom border and small border radius
<div class=“blue-line”>
<a href=“#” class=“grey-back”>
<\div>
Below is the code
HTML
<div class="fgimg">
</div>
CSS
.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
Here is the demo :
http://jsfiddle.net/sathish_opr/03kkqywy/1/
When we hover on the image, image position changes.
I would like to see the border color of the image when hovered on, but image position changes automatically :(
what could be the problem ?
You either set an invisible border on the image in the normal state:
border: 3px outset transparent;
Or you could apply:
box-sizing: border-box;
This way, the border is calculated to the inside of the width and height. (the 200px width for example)
DEMO TIME:
http://jsfiddle.net/03kkqywy/4/
BTW:
you don't need any prefixing on border-radius anymore.
But if you do, allways put the non prefix property as the last one of those.
Now Define your
.fgimg{
border: solid 3px transparent;
}
Demo Link
This happens because you haven't set a border to the image initially. When you hover, the border is added to the overall width of the image and hence you can see it move.
Set a transparent border to the image initially. This way the border is already added o the width of the image and the image won't be moving when you hover over it.
.fgimg{
border:outset;
border-color: transparent;
}
http://jsfiddle.net/sathish_opr/03kkqywy/1/
css code
.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
border: solid 3px transparent;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
url http://jsfiddle.net/03kkqywy/3/demo
Right now I would like to have a plus sign with a circle around it.
http://jsfiddle.net/dtracers/cvtztcy1/1/
<h1>TEXY TXT <span>+</span></h1>
<style>
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0px;
padding-bottom:0.125em;
cursor:pointer;
margin:0px;
}
/* Just to see if that would modify anything */
h1 {
padding:0px;
margin:0px;
}
</style>
After looking at it you can tell that this is not a circle but instead an elipse.
I have realize that it is the text height that is causing this issue but is there a way to make it appear closer.
The background is dynamic so I can not use an image.
And I would rather not have a floating element that depended on absolute positioning.
I would also like the circle in height to be equal to its current width.
I know I can just make it wider but I don't want a giant circle I want a tight small circle
EDIT
For those that are saying this is the same question it is kinda.
The difference between what I am asking and what that person is asking is that in their case the circle is larger than the bounds of the text.
What I am asking is for a circle that is smaller than the bounds of the text.
As such none of the solutions given there will apply to my question.
You can achieve this using :after pseudo element. check the DEMO.
span {
position:relative;
padding:0; margin:0;
cursor: pointer;
}
span:after
{
content:"";
position:absolute;
display:inline-block;
left:-1px;
top:7px;
background:gold;
border-radius: 50%;
width:0.5em;
height:0.5em;
font-size:1.3em;
z-index:-1;
}
Adjust your padding value in css and all is good :
demo
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0 2%; /* updated */
/* padding-bottom:0.125em; removed */
cursor:pointer;
margin:0px;
}
This will lead to a perfect circle:
span {
border-radius: 150px;
border-style:solid;
border-width: 1px;
padding:1% 2%;
cursor:pointer;
margin:0px;
width:200px;
line-height:300px;
}
One solution is to make the span have equal width and height using em so it naturally adjusts to the font size.
h1 span {
display: inline-block;
width: 0.9em;
height: 0.9em;
line-height: 0.8em;
text-align: center;
color: teal;
background-color: palegoldenrod;
border: 0.18em solid;
border-radius: 1000px;
padding-left: 1px;
cursor: pointer;
}
Then center the plus sign with line-height and text-align.
Fiddle with the CSS:
http://jsfiddle.net/zx2c4drL
What is the proper way to re-create a subtle inner outline like the following that works cross-browser?
Currently, I've an outer div and an inner div which both have a border of different color. Is there a solution that only uses one div and not two?
jsFiddle Demo
What I usually do for this type of approach is make a div container with a border and a padding. And then I will have a div inner with a border. This way the container can hold the outer border and the contained border colors. And your inner div can hold the inner border color.
html
<div class="outer">
<div class="inner">
<div class="content">
Just some text.<br>
Could be other stuff,<hr>
In here too.
</div>
</div>
</div>
css
body{
background-color:#545454;
}
.outer{
border: 2px solid black;
padding: 3px;
border-radius:4px;
width:200px;
height:200px;
background-color:#858585;
}
.inner{
background-color:#545454;
width:196px;
height:196px;
border-radius:4px;
border:2px solid black;
}
.content{
color:white;
padding:5px;
}
Untested: You can use a combination of box-shadow, outline & border:
div{
height:200px;
width:200px;
background:#F7F7F7;
box-shadow:0 0 3px red inset;
outline: solid 2px blue;
border:solid 1px #F7F7F7;
}
Preview: http://codepen.io/anon/pen/vthAJ
You can try using CSS3 border images:
http://css-tricks.com/understanding-border-image/
This will allow you to just use one div.
You just need to create simple, small repeatable thumbnails. Just have one color on one side, another color on the other. Or create a gradient like in the picture. You probably know the drill.
I think if you combine it with CSS3 border-radius you can also get the rounded corners effect.
How about this? FIDDLE
You can add the :after psuedo-element with a border.
.double {
position: relative;
border: 2px solid silver;
}
.double:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid black;
}
The screenshot has border-radius as well, so if you can use CSS3 and are only looking to go a version back in IE there are CSS3 methods that will work using box-shadow: inset... to accomplish the second border.
If you are not concerned about the border-radius aspect of the screenshot you can use a combo of border and outline. Please see Fiddle for an example.
How do you make a div so that its border corners are rounded?
Here it is:
<style type="text/css">
div.test
{
width: 115px;
padding: 10px;
border: 2px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<div class="test">This is some text!</div>
Use the border-radius property. The higher the specified amount (typically in px), the more rounded your shape. Example:
myDiv { border-radius:30px;}
Hope that helps.
add this css:
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
With CSS add the code: border-radius: 10px.
I use 10px for example, but you can experiment with however amount of pixels you like.
If you don't want to rely on pixels, you can always use %
border-radius: 50%;