EDIT: Just to be completely clear. My primary interest is NOT IE6 but whatever solution I use does need to work in IE6 without looking completely hideous.
So a solution in which the rounded corners ended up square in IE6 would be fine.
A solution where the rounded corners ended up in random locations in IE6 would not be OK.
I have used this tool/technique http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=000000&sz=5px to produce some simple rounded corner divs.
Can anyone tell me how to adapt the CSS output by this tool so that the div only has a border (and no fill) ? At the moment you get a solid block of colour (black in this example).
I'm open to completely different techniques but must be imageless and must degrade reasonably for IE6 ('reasonably' includes no rounded corners but still get a box)
I've tried channging the 'background-color' to 'inherit' but then I lost the left and right hand sides of the box.
Sample css/html follows:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.spiffy4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.spiffy5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.spiffyfg{
background:#000000}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
jQuery UI does a great job at only applying the radius to the border, using native CSS:
/* Individual Corners */
.ui-corner-tl {
-moz-border-radius-topleft: 4px/*{cornerRadius}*/;
-webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-tr {
-moz-border-radius-topright: 4px/*{cornerRadius}*/;
-webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-bl {
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-br {
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
-webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
/* All Corners */
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
Then you can set border or border-color to apply only a border to it.
See the jQuery-UI Themes.css file for more styles.
Currently achieving the border radius is only mastered in FireFox (-moz-border-radius: 5px;) and in Chrome (-webkit-border-radius: 5px;).
There are scripts to implement the same effect in IE, however, they are not that great. Mainly when it comes to patterns as background-images.
Lets take an example, that you got a pattern as background-image and solid block container with rounded borders on top. The script will produce the borders indeed, but the corners will be solid color and not transparent.
However, there is a way! Its called CSS3 PIE. Learning to use it at first is a nightmare. However, if you get it working..it will be the ultimate solution! CSS3 PIE will add radius to your corners and keep the corner-background transparent. Also, it works great in IE6.
Now, as I understand.. You simply want a border and the container not filled. Well, try the demo on the bottom, in FireFox or Chrome. Is this what you meant? If so, then still CSS3 PIE, is your best bet!
<style>
#demo_container {
/* The actual trick: */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* For making demo more fun: */
border: 2px solid black;
padding: 10px;
margin: 10px;
}
</style>
<div id="demo_container">Stack Overflow</div>
This is the closest I could get :P
.spiffy1 {
margin-left: 4px;
margin-right: 4px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #919191;
border-right: 1px solid #919191;
background: #3F3F3F;
}
.spiffy2 {
margin-left: 2px;
margin-right: 2px;
padding-right: 1px;
padding-left: 1px;
border-left: 2px solid #303030;
border-right: 2px solid #303030;
background: #303030;
}
.spiffy3 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid #303030;
border-right: 1px solid #303030;
}
.spiffy4 {
border-left: 1px solid #919191;
border-right: 1px solid #919191;
}
.spiffy5 {
border-left: 1px solid #3F3F3F;
border-right: 1px solid #3F3F3F;
}
<div style=" height:100px; border: 1px solid black; border-width: 0px 1px;">
Seriously... use border-radius! I don't think it's a good thing to have a lot of code, only to have a great effect for an ancient browser...
Related
I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}
U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;
Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.
Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code
Could someone please explain why do I have such a curved border as outlined on the picture attached?
Here is my CSS:
.fourth-article-category {
border-bottom: 4px solid #5692b1;
}
article {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
And also HTML:
<article class="fourth-article-category">
<img src="img/article_4_photo.jpg" width="470" height="345" title="A-Rod, A Fraud, And A Waste Of
Yankees Money, Public's Time" />
<section>
<div class="article-info"> <span class="date">25 July 2013</span> <span class="comments-quantity">6 Comments</span> </div>
<div class="article-preview">
<h3>A-Rod, A Fraud, And A Waste Of
Yankees Money, Public's Time</h3>
<p>Enough already. I can’t take it no more. Free us from enslavement
to all this banter. OK, so my fit of anger this morning is not steroid-
induced…though that would be fitting in light of recent discussions.
Baseball talk of late has centered upon performance enhancing
drugs. Biogenesis has become the new BALCO. A-Rod the new
Barry Bonds. And all I hear from various media types are
questions like.</p>
</div>
</section>
</article>
The border isn't curved, it's at an angle.
All borders meet an angles.
See this demo - JSfiddle
.box {
width:50px;
height:50px;
margin:50px;
border:25px solid red;
border-bottom:25px solid blue;
}
Because you are using a single pixel border you are encountering sub-pixel rendering issues.
EDIT -
As an alternaive you could use a box-shadow instead of a bottom border
CSS
.box {
width:50px;
height:50px;
margin:50px;
border:5px solid red;
border-bottom:none;
box-shadow: 0 5px 0px 0px black;
}
Box-Shadow Demo
It's absolutely normal: You have different border-width values and different border-color values for horizontal and vertical borders.
Since the edge between these is angled, your 'curvature' appears. See it here in action: http://jsfiddle.net/qqTc2/4/ (the 'hover' bit)
You could do better, if you used two outer divs, which form the borders.
The outer div is top and bottom, and the inner is the left and right border.
<div class="outer">
<div class="inner">Better</div>
</div>
.outer {
border: 4px solid black;
border-left-width: 0;
border-right-width: 0;
width: 102px;
}
.outer .inner {
border: 1px solid lightGray;
border-top-width: 0;
border-bottom-width: 0;
height: 100px;
text-align: center;
line-height: 100px;
}
its not curved.. if you use same border color all 4 sides you can identify that
LINK
CSS:
.fourth-article-category {
border-bottom: 4px solid #5692b1;
}
article {
border-left: 1px solid #5692b1;
border-right: 1px solid #5692b1;
border-radius:0;
}
CSS :
.outer-element {
border-bottom: 4px solid #5692b1;
border-radius: unset;
OR
border-radius: 0px;
}
.outer-element inner {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
I think this should work for u.
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
Hi i created a label with some css. The label css is working fine Firefox , chrome but when i run in IE the css is not coming properly.
label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; }
.div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px; border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;}
.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-right { -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label>
<div class="div_form_textbox ui-corner-right">
<input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/>
</div>
The proper output in mozilla and chrome like this
So the same thing in IE is coming like this:
The left side is the label and the right is the div inside there is a textbox. my problem
Only half of that is coming in the label of doctors first name . Please help me to get out this issue
I get that exact behaviour in IE when I look at it in Quirks Mode.
You probably just need to add a valid doctype as the very first line, such as:
<!DOCTYPE html>
If you already have that, then there are other possible reasons for Quirks Mode.
IE8 and less browsers cannot render CSS3 -webkit commands. Like the one you have used in css style:
.ui-corner-left { -webkit-border-bottom-left-radius :4px;....