/    Sign up×
Community /Pin to ProfileBookmark

Rounded Borders on CSS

Copy linkTweet thisAlerts:
Sep 25.2007

Hi all

I have been searching the Internet for a really good rounded borders system.

There are several methods with images and one called niftyCube that uses CSS and Javascript.

They are all very complicated and hard to work around unless you study every line of code to make sure you dont double code or overwrite a function with a new function.

The point of my thread is to discuss whether the WWW are looking to implemented a CSS border option called rounded e.g.

[code=html]
<style type=”textcss”>
div.main {
border: 1px red solid rounded;
}

</style>
[/code]

wouldnt this just make life easier, surely it must be possible if you can have a border option!!!!!????

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@gizmoSep 25.2007 — I didn't think this http://www.alistapart.com/articles/mountaintop/ was difficult to follow. However, the discussion, while interesting would only be hyperthetical and I can just see a different interpretation for each new version of a certain browser. ? ?
Copy linkTweet thisAlerts:
@pentaceSep 25.2007 — I'm on my phone so I don't have the link. But there is actually a page I found that explains how to make a true rounded css border with no images. Its nice but extremely work heavy. As far as making round borders an option they will never do it they still can't even get all browsers to use all functions as it is. But what could be done is use this page and maybe have the people that make prototype or another library implement it into their library so that it can be easly done
Copy linkTweet thisAlerts:
@stymieSep 25.2007 — <i>
</i>&lt;!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv='content-type' content='text/html; charset=iso-8859-1'&gt;
&lt;title&gt;Rounded Corners Using CSS&lt;/title&gt;

&lt;style&gt;
.outerDiv{width:300px; margin:50px auto;}
.innerDiv{height:300px; background-color:#f0f8ff; border-left:1px solid #808080; border-right:1px solid #808080;}
.rtop *,.rbottom *{display:block; height:1px; overflow:hidden;}
.r1{border-left:2px solid; border-right:2px solid; background-color:#808080; border-color:#808080; margin-left:7px; margin-right:7px;}
.r2{border-left:2px solid; border-right:2px solid; margin-left:5px; margin-right:5px;}
.r3{border-left:1px solid; border-right:1px solid; margin-left:4px; margin-right:4px;}
.r4{border-left:1px solid; border-right:1px solid; margin-left:3px; margin-right:3px;}
.r5{border-left:1px solid; border-right:1px solid; margin-left:2px; margin-right:2px;}
.r6{border-left:1px solid; border-right:1px solid; margin-left:1px; margin-right:1px; height:2px;}
.r7{border-left:1px solid; border-right:1px solid; height:2px;}
.r2,.r3,.r4,.r5,.r6,.r7{border-color:#808080; background-color:#f0f8ff}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="outerDiv"&gt;
&lt;b class="rtop"&gt;&lt;b class="r1"&gt;&lt;/b&gt;&lt;b class="r2"&gt;&lt;/b&gt;&lt;b class="r3"&gt;&lt;/b&gt;&lt;b class="r4"&gt;&lt;/b&gt;&lt;b class="r5"&gt;&lt;/b&gt;&lt;b class="r6"&gt;&lt;/b&gt;&lt;b class="r7"&gt;&lt;/b&gt;&lt;/b&gt;

&lt;div class="innerDiv"&gt;
&lt;/div&gt;

&lt;b class="rbottom"&gt;&lt;b class="r7"&gt;&lt;/b&gt;&lt;b class="r6"&gt;&lt;/b&gt;&lt;b class="r5"&gt;&lt;/b&gt;&lt;b class="r4"&gt;&lt;/b&gt;&lt;b class="r3"&gt;&lt;/b&gt;&lt;b class="r2"&gt;&lt;/b&gt;&lt;b class="r1"&gt;&lt;/b&gt;&lt;/b&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@peteybauthorSep 26.2007 — Ah guess its just wishful thinking!!!

I do like stymie method but again its a whole lot of code for something that SHOULD BE simple.
Copy linkTweet thisAlerts:
@lohumihemSep 26.2007 — try this . i tried it lots of time.

http://spiffycorners.com/
Copy linkTweet thisAlerts:
@WebJoelSep 26.2007 — Holding out hope for CSS3, which I beleive is supposed to include a method of creating 'round corner' on element use a declaration very similar to the one you suggested in first post.

In the meantime, the simplest method is to have an 'position:relative' container that has four 'position:absolute;' images, each respectively a 'corner' for the four edges. -A 'topleft', 'topright', 'bottomleft' and 'bottomright' would suffice.

Add "padding:foo:[B]XX[/B]px;" to the relative-positioned container whereby the value "foo:XXpx" is a number equal to or slightly greater than the height/width of the four courner images. This ensure that the content of the container is 'padded' away from the images so as to not over-write on top of them.

Here is an example:[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
p {font-size: 100%; line-height:1.0em; margin:16px 0 10px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;
font:x-small Arial, Verdana, serif;
voice-family: ""}"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and under, 100% height */
font-size: small; voice-family: ""}"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<style>
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

[B]<div style="position:relative; width:500px; height:auto; border:1px solid silver; padding:40px 30px; margin:25px auto;" >[/B]
<h1>Level-1 Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<h2>Level-2 Header</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>


[COLOR="Red"]<img src="#" style="position:absolute; left:0; top:0; width:25px; height:25px; background-color:silver;" />
<img src="#" style="position:absolute; right:0; top:0; background-color:silver;" />
<img src="#" style="position:absolute; left:0; bottom:0; background-color:silver;" />
<img src="#" style="position:absolute; right:0; bottom:0; background-color:silver;" />[/COLOR]
[B]</div>[/B]



</body>
</html>[/CODE] [B]BOLD[/B] is the relative-positioned container, and [B][COLOR="Red"]red[/COLOR][/B] are the four absolute-positioned images.

The [B]container[/B] must be stated "position:relative;" in order for the "position:absolute;" images to be based on it, else they will be based upon the upper-left of the viewscreen.

This is possibly the easiest, most all-browser method to attain curved corners.
Copy linkTweet thisAlerts:
@peteybauthorSep 26.2007 — agh!!!! having to use images!!!!!
Copy linkTweet thisAlerts:
@WebJoelSep 26.2007 — Yet people keep upgrading to another busted M$ product and prevents Web Standards from progressing...

Wishful thinking --> http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius -SOMEDAY! ?

>>sigh<<
Copy linkTweet thisAlerts:
@peteybauthorSep 27.2007 — when when when!!!!! when is CSS 3 to be released?
Copy linkTweet thisAlerts:
@WebJoelSep 27.2007 — Best guess is 'another 10 years at least'. IE doesn't even fully support CSS2 yet.
Copy linkTweet thisAlerts:
@peteybauthorSep 28.2007 — ah, monstersoft and their monopoly!!!
×

Success!

Help @peteyb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...