I am just brainstorming design ideas and this one has me a little stumped. I want to be able to individually round the sides of a box. Such as three sides of the box are still square and the fourth side is rounded or curved. My own experiments haven't come anywhere close and Google only comes back with rounded corners (border radius). It seems like it should be simple enough, but clearly I am missing something.
Anybody have any thoughts? Thanks.
I found another similar answer:
Here is the jsfiddle: http://jsfiddle.net/swqZL/
CSS for element div with class "figure":
.figure {
height: 400px;
width: 200px;
background-color: black;
border-bottom-left-radius: 100%30px;
border-bottom-right-radius: 100%30px;
}
Horizontal radius 100%, vertical radius 30px
Related
Now I am working on HTML page.
And I made div with 'border-radius: 150px', so this div has radius border.
But I need to give this div square border.
Of course not only exact border, maybe similar thing like border is ok.
But I don't know how can I do this.
Please let me know.
Thank you.
EDIT
Now I found that outline is not same working for Chrome and Firefox.
In Chrome outline is only for itself area, but in Firefox outline is for area including it's children dom nodes.
Now I want to make Firefox as same as Chrome's outline action.
How can I do this in Firefox.
Hope this is what you are looking for.
:)
div {
background: red;
width: 300px;
height: 300px;
border-radius: 150px;
outline: 5px solid green;
}
<div></div>
I've created a view and I'm trying to make it with rounded corners so I'm using border-radius.
The only problem is that I can see the corners of one of my div elements and I can't seem to get rid of them. I try to narrow down which element it was showing the borders with google developer tools but I can't pinpoint it.
Here is the sample.
It is because of parent having no border-radius, so you can add same border-radius to .center_content class
.center_content {
width: 90%;
margin: auto;
position: relative;
background: #FFFFFF;
border-radius: 15px;
}
or You can also remove the background from this class to achieve the same.
JS Fiddle Sample
I'm trying to recreate a "pixelated" version of the Space Invaders icon in HTML/CSS using individual 30px square images with a blue border of 2px between the squares.
However, I'm having incredible difficulty aligning the 2px borders since the square image is not repeated equally on each row (e.g. the first 2 rows only display the square image twice, while the 3rd row displays it 7 times, etc.).
I first imagined an 11 x 8 rectangular grid, and then I used a <div> with the same width and height as the square images and with no border as placeholders where the images are not meant to appear, while displaying each square image with a solid border of 1px where they are meant to appear.
The problem with that is that while the images on the inside correctly display a doubled-up border of 2px (1px + 1px borders), the outermost squares only display a 1px border on the outside sides that are not next to another square.
So then I tried setting 2px borders on the "outer sides" of the "outer squares", but that then changed the entire "line height" of the row of images (using vertical-align: middle;) in that entire row from 1px to 2px, creating an empty white space 1px high at the top of the inner squares.
So I've been pulling my hair for the last several hours trying to get this to look "right" with the 2px borders properly aligned in a "grid" while not appearing where no square image is meant to show, but I'm going in circles.
Surely, there is a simpler, more straightforward way of doing this. What's the magic solution?
So, since you have been pulling your hair on the problem, I guessed I might suggest a simpler solution to it, perhaps not exactly an answer to your question, which is very difficult to give without an HTML example.
I made this CSS-only space invader:
CSS-only Space Invader!
Basically what you do is have a general CSS rule for your pixels <div>s, I have it defined like so:
div{
background-color: transparent;
border: 1px solid #000;
float: left;
width: 30px;
height: 30px;
}
Of course, please, choose something less general than div, I did it just for the example purpose. In this way you have a div making up your transparent pixels. Everytime you need to fill up a pixel in your image, just add a class (I used .px) with this minimal CSS rule
.px{
background-color: lightgreen;
}
When you are starting your new line, give your div a class of .first and make it clear:left.
.first{
clear:left;
}
I think this is a pretty simple solution! Bring on the CSS pixel art!
I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that contains the footer. My problem is this: Since the border of my "header" div is not rounded, the large "container" div seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" div superimposing itself over the "container" div. I have an example here: http://jsfiddle.net/V98h7/.
I have tried rounding the border of the "header" div to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" div's background color).
Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.
I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.
Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/
Add -
#outer {
overflow: hidden;
}
and it will work.
More information on the overflow property can be found on MDN.
Use this:
#outer { overflow: hidden; }
or this:
#inner1 {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
Or you maybe can try this:
#outer div:first {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
(Note: I haven't tested the last option above).
here is the update jsfiddle
http://jsfiddle.net/V98h7/1/
To just round border corners border-radius can take 4 values TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS
so border-radius: 20px 20px 0 0; will round your inner div from top. Remember to use the same radius value as that of the parent div, else you will see some extra border.
Border fix for css border-radius background color bleed and inner elements breaking border radius. This might help with the weird border glitches.
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
This reference was found here http://css3please.com/
by https://stackoverflow.com/a/7052769/9071880
Try giving the container div a slightly larger border radius (on the top two corners) than the header div.
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>