If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

in your view write

<div class="box"> 
test 
</div>

in static/base.css add

.box { 
    -moz-border-radius: 5px;/*for firefox3*/ 
    -webkit-border-radius: 5px;/*for safari and chrome*/ 
    background-color: rgb(249,249,249); 
    background-image: url("../default/border_radius?r=4&color=249,249,249&bg=235,232,230");/*for opera*/ 

}

in controllers/default.py add

def border_radius(): 
    import re 
    try: 
        radius = request.vars['r'] 
    except KeyError: 
        radius = 5 
    try: 
        color = request.vars['color'] 
        if re.match('\d{3},\d{3},\d{3}',color): 
            color = 'rgb(%s)'%color 
    except KeyError: 
        color = 'rgb(249,249,249)' 
    try: 
        bg = request.vars['bg'] 
        if re.match('\d{3},\d{3},\d{3}',bg): 
            bg = 'rgb(%s)'%bg 
    except KeyError: 
        bg = 'rgb(235,232,230)' 
    import gluon.contenttype 
    response.headers['Content-Type']= gluon.contenttype.contenttype('.svg')+';charset=utf-8' 
    return '''<?xml version="1.0" ?> <svg xmlns="http://www.w3.org/ 
    2000/svg"> <rect fill="%s" x="0" y="0" width="100%%" height="100%%" /> 
<rect fill="%s" x="0" y="0" width="100%%" height="100%%" rx="%spx" /> 
</svg>'''%(bg,color,radius)

you'r done

for WebKit (Safari, Chrome) and Gecko (Firefox) the experimental css3 property is used to create the rounded corners and for Opera an SVG image with rounded corners is generated and used as background

happily stolen from http://home.e-tjenesten.org/~ato/2009/08/border-radius-opera

Why? Because I did not want to create complicated tables/complicated css and java scrip rounded corners always made my site very slow and i dont give a .. for IE.

Hint: you can also do something like

background-image: url("../default/border_radius?r=50&color=red&bg=blue");

Related slices

Comments (0)


Hosting graciously provided by:
Python Anywhere