Rounded div with css

CSS div rounded corners

Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to ‘flash’ upon page load.

 -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; 

This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com

In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.

To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.

Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.

Источник

CSS Rounded Corner Divs

@egrunin Have you discovered a CSS corner rounding method that does work with versions of IE before 9?

@egrunin: IE’s use slowly decreasing’ still for solution you have to include «pie.htc» file to modify\upgrade the behavior of the browser. take a look at the following links as well they show some usage stats.

4 Answers 4

Specify the corners you want:

border-top-left-radius: 10px 5px; border-bottom-right-radius: 10% 5%; border-top-right-radius: 10px; 

Alternatively for three rounded corners, round all the corners ( border-radius: 15px; ) and then turn rounding off on the corner you don’t want it on ( border-top-left-radius: 0px; ).

Here is a great resource that you can find helpful to do it for you and to learn.

Well to answer you question (apart from the tool):

-webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; 

Two corners (top left and right):

-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; 

Three corners (top left and right and bottom right)

-webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0; 

All a 10px radius, very easily done with the tool I recommend.

BTW: Don’t miss idlefingers’ answer, very good resource!!

Источник

How to use only CSS to round my div tag area’s corners?

I use div tags to define areas within my web pages. I set all the obvious things like background, size, padding, etc. But it is all very square. How can I use only CSS to round the corners?

6 Answers 6

Here is a simple HTML document to demo how to achieve it through only CSS.

    .b1f, .b2f, .b3f, .b4f .b1f .b2f .b3f .b4f .contentf .contentf div  
Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area Content Area
   

You would use the border-radius property. However, this is only supported in CSS3, which no browser implements yet. If you only need it to work in a couple browsers you could use -webkit-border-radius and -moz-border-radius which would let it work in Safari and Firefox respectively.

If you are not opposed to using images. Here’s s method I came up with for making rounded borders.

It’s practical because if you want rounded borders without images, you aren’t going to get very far without inserting a lot of extra HTML into your page.

@Zack: actually, it is. Many professional (and good!) web developers already use it. One example: Twitter page. Thanks to graceful degradation this isn’t really an issue.

-moz-border-radius will get you rounded corners in all versions of Firefox. More helpful info at the Sitepoint CSS Reference.

border-radius will get you rounded corners in Safari 3. More info on border-radius at the CSS 3 Spec.

If by «only CSS» you mean «without JavaScript» then you can surely add background images with round corners to your elements. You may need extra markup in this case depending on how much flexibility you need.

Considering that you cannot use multiple background images yet, I think using a single image is the best only CSS option.

If you can use JavaScript, then you may want to check out Nifty Corners Cube. I mention this because it works even on top of images and supports transparency.

Ask google about «css rounded corners no images» and you’ll find many, many examples of how to do it.

Personally, I like the methods based on manipulating margins to draw the curve line-by-line, despite the amount of noise they produce in the page source, because they’re the most flexible and can draw any shape of edge. If you’re only interested in actual rounded corners (i.e., using a 90-degree circular arc), there’s a much more compact solution based on some trickery with a carefully-positioned bullet.

There’s a tutorial in http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/ that explains how to set rounded borders in images. Peharps it migth be useful to you since the image is set as the background of a div. Although you will need to use other images and a javascript. The javascript code may be reduced if you use JQuery. o/

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

border-radius

The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse .

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset; 

The border-radius property is specified as:

Values

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

border-radius: 1em/5em; /* It is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; 

border-radius: 4px 3px 6px / 2px 4px; /* It is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; 

Formal definition

• border-top-left-radius : 0
• border-top-right-radius : 0
• border-bottom-right-radius : 0
• border-bottom-left-radius : 0

• border-bottom-left-radius : two absolute s or s
• border-bottom-right-radius : two absolute s or s
• border-top-left-radius : two absolute s or s
• border-top-right-radius : two absolute s or s

• border-top-left-radius : a length, percentage or calc();
• border-top-right-radius : a length, percentage or calc();
• border-bottom-right-radius : a length, percentage or calc();
• border-bottom-left-radius : a length, percentage or calc();

Formal syntax

Examples

pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre> pre id="example-2"> border: groove 1em red; border-radius: 2em; pre> pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre> pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre> pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre> pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre> pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre> 

pre  margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1  border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2  border: groove 1em red; border-radius: 2em; > pre#example-3  background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4  border: none; border-radius: 40px 10px; background: gold; > pre#example-5  border: none; border-radius: 50%; background: burlywood; > pre#example-6  border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7  border: dashed; border-width: 2px 4px; border-radius: 40px; > 

Live Samples

Specifications

Browser compatibility

BCD tables only load in the browser

Источник