/    Sign up×
Community /Pin to ProfileBookmark

Rounded borders

Copy linkTweet thisAlerts:
Feb 10.2009

Hi,
Is it possible to make rounded corners for borders of a div or borders of a table with css?
I found this line of code somewhere but it does not seem to work …

border-radius: 10px;

so, the picture hor2c.jpg still displays with non rounded corners….

.horizline1
{
width:900px;
height:81px;
border:1px gray;
position:absolute;
left:5px;
top:206px;
border-radius: 8px;
background-image:url(‘pictures/hor2c.jpg’);
}

Thanks

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangFeb 10.2009 — It's not supported yet. Use:border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

For Opera: http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/

For IE you will have to look at VML or use images for the corners.
Copy linkTweet thisAlerts:
@motuitiFeb 10.2009 — Fang

I use the following.

<style type="text/css">

#table1 {

border:3px solid #00FF00;

-moz-border-radius:25px;

-webkit-border-radius:25px;

width:1120px;

height:5000px;

background-image: url('wavewater.jpg')

}

</style>

Works fine with Fire Fox & Safari -[B] Not on IE 6 thru Vista[/B]

I did notice you preface your Moz Line & Webkit line with:

"border-radius: 10px;" Which I did Not.

Do you think that might be it?

[I]-Sandy[/I]
Copy linkTweet thisAlerts:
@FangFeb 11.2009 — None of this works in IE. You will have to use transparent corners images or VML
Copy linkTweet thisAlerts:
@motuitiFeb 11.2009 — I was under the impression that the

the line -webkit-border-radius:25px; Was for the IE folks

and the -moz-border-radius:25px; Was for the Safari Mozilla folks

Guess I was wrong, Yet I remember something about marrying the two somehow.

Oh well, I'll leave it there till IE catches up :-)

Sandy
Copy linkTweet thisAlerts:
@slaughtersFeb 11.2009 — I've used Nifty Corners before - http://www.html.it/articoli/niftycube/index.html

Easy to implement and light weight code (no images used) for placing rounded corners on DIVS, tabs and buttons, but will not work for jpg images.
Copy linkTweet thisAlerts:
@motuitiFeb 11.2009 — Thanks for that, Will look into your link.

You mentioned "[I]will not work for jpg images[/I]".

Well I've found a walk around for jpg's and for my purposes works great.

As a Mac used there is software called "Downsize" by Stunt Software. (There must be a PC equiv.) It simply rounds edges of your jpg's (of anysize) to a radius of your choosing and fills in the corners with a background color of your webpage. Works in Batches too.
×

Success!

Help @ketanco 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 5.20,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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